Floating Label Input

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

<!-- Floating Label - Standard -->
<div class="relative">
  <input type="email" id="email-float" placeholder=" " class="peer w-full px-4 py-4 pt-6 pb-2 bg-white border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all" />
  <label for="email-float" class="absolute left-4 top-4 text-gray-400 transition-all duration-200 pointer-events-none peer-placeholder-shown:top-4 peer-placeholder-shown:text-base peer-focus:top-2 peer-focus:text-xs peer-focus:text-blue-500 peer-focus:font-medium">Email Address</label>
</div>

<!-- Floating Label - With Value -->
<div class="relative mt-4">
  <input type="email" id="email-filled" placeholder=" " value="user@company.com" class="peer w-full px-4 py-4 pt-6 pb-2 bg-white border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all" />
  <label for="email-filled" class="absolute left-4 top-2 text-xs text-blue-500 font-medium transition-all duration-200 pointer-events-none peer-placeholder-shown:top-4 peer-placeholder-shown:text-base">Email Address</label>
</div>

<!-- Floating Label - Password -->
<div class="relative mt-4">
  <input type="password" id="password-float" placeholder=" " class="peer w-full px-4 py-4 pt-6 pb-2 bg-white border border-gray-200 rounded-xl focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 transition-all" />
  <label for="password-float" class="absolute left-4 top-4 text-gray-400 transition-all duration-200 pointer-events-none peer-placeholder-shown:top-4 peer-placeholder-shown:text-base peer-focus:top-2 peer-focus:text-xs peer-focus:text-purple-500 peer-focus:font-medium">Password</label>
</div>

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

# Floating Label

Floating label text input.

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

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