Underline Input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- Underline Input - Default -->
<div class="relative">
  <input type="text" placeholder=" " class="peer w-full px-0 py-3 bg-transparent border-0 border-b-2 border-gray-300 rounded-none focus:outline-none focus:border-blue-600 placeholder-transparent peer-focus:placeholder-transparent" />
  <label class="absolute left-0 -top-3.5 text-sm text-gray-600 transition-all pointer-events-none peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-3.5 peer-focus:text-sm">Email address</label>
</div>

<!-- Underline Input - With Value -->
<div class="relative mt-6">
  <input type="text" value="john.doe@example.com" class="peer w-full px-0 py-3 bg-transparent border-0 border-b-2 border-gray-300 rounded-none focus:outline-none focus:border-blue-600 placeholder-transparent peer-focus:placeholder-transparent" />
  <label class="absolute left-0 -top-3.5 text-sm text-gray-600 transition-all pointer-events-none peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-3.5 peer-focus:text-sm">Email address</label>
</div>

<!-- Underline Input - Dark Variant -->
<div class="relative mt-6 bg-gray-900 p-4 rounded-lg">
  <input type="text" placeholder=" " class="peer w-full px-0 py-3 bg-transparent border-0 border-b-2 border-gray-500 text-white rounded-none focus:outline-none focus:border-blue-400 placeholder-transparent peer-focus:placeholder-transparent" />
  <label class="absolute left-0 -top-3.5 text-sm text-gray-400 transition-all pointer-events-none peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-3.5 peer-focus:text-sm">Dark mode input</label>
</div>

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

# Underline Input

Underline-style text input.

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

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