Dark Mode Input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- Dark Mode - Default -->
<div class="p-6 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-300 mb-2">Email</label>
  <input type="email" placeholder="you@example.com" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Dark Mode - Subtle Border -->
<div class="p-6 mt-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-400 mb-2">API Key</label>
  <input type="password" placeholder="sk-..." class="w-full px-4 py-3 bg-slate-800 border border-slate-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors" />
</div>

<!-- Dark Mode - Glow Effect -->
<div class="p-6 mt-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-400 mb-2">Username</label>
  <input type="text" placeholder="username" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:shadow-[0_0_0_2px_rgba(168,85,247,0.2)] transition-all" />
</div>

<!-- Dark Mode - Terminal Style -->
<div class="p-6 mt-4 bg-black rounded-xl font-mono">
  <label class="block text-sm font-medium text-green-400 mb-2">$ command</label>
  <div class="flex items-center">
    <span class="text-green-400 mr-2">›</span>
    <input type="text" placeholder="Enter command..." class="flex-1 bg-transparent text-green-400 placeholder-green-700 focus:outline-none" />
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Dark Mode Input

Dark-themed input field.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/dark-mode
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`