Filled Input

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

<!-- Filled Input - Default -->
<div class="relative">
  <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
  <input type="text" placeholder="Enter username" class="w-full px-4 py-3 bg-gray-100 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors" />
</div>

<!-- Filled Input - Colored -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">With Background</label>
  <input type="text" placeholder="Type something" class="w-full px-4 py-3 bg-blue-50 border-0 rounded-lg text-blue-900 placeholder-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors" />
</div>

<!-- Filled Input - Dark -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Dark Fill</label>
  <input type="text" placeholder="Dark style" class="w-full px-4 py-3 bg-gray-800 border-0 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors" />
</div>

<!-- Filled Input - Soft Rounded -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Soft Rounded</label>
  <input type="text" placeholder="Fully rounded" class="w-full px-4 py-3 bg-gray-100 border-0 rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500 focus:bg-purple-50 transition-colors" />
</div>

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

# Filled Input

Filled surface text input.

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

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