Outlined Input

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

<!-- Outlined Input - Default -->
<div class="relative">
  <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
  <input type="text" placeholder="Enter your name" class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Outlined Input - Small -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Small Input</label>
  <input type="text" placeholder="Small size" class="w-full px-3 py-1.5 bg-white border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Outlined Input - Large -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Large Input</label>
  <input type="text" placeholder="Large size" class="w-full px-5 py-3.5 bg-white border border-gray-300 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Outlined Input - Filled -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Pre-filled Input</label>
  <input type="text" value="Jane Smith" class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

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

# Outlined Input

Outlined text input.

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

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