Animated Focus 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

<!-- Animated Focus - Scale Up -->
<div class="relative">
  <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
  <input type="email" placeholder="you@example.com" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-300" />
</div>

<!-- Animated Focus - Border Slide -->
<div class="relative mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
  <div class="relative overflow-hidden rounded-xl border-2 border-gray-200 focus-within:border-purple-500 transition-colors duration-300">
    <input type="text" placeholder="Choose username" class="w-full px-4 py-3 bg-white focus:outline-none" />
  </div>
</div>

<!-- Animated Focus - Label Float -->
<div class="relative mt-6">
  <input type="email" placeholder=" " class="peer w-full px-4 py-4 pt-6 pb-2 bg-white border-2 border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 transition-all duration-300" />
  <label 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 (floating label)</label>
</div>

<!-- Animated Focus - Underline Expand -->
<div class="relative mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-1">Website</label>
  <input type="url" placeholder="https://" class="w-full px-4 py-3 bg-transparent border-b-2 border-gray-300 rounded-none focus:outline-none focus:border-blue-500 focus:ring-0 transition-colors duration-300" />
</div>

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

# Animated Focus

Input with animated focus treatment.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/animated-focus
```
Copy from `code.html`. Label inputs accessibly.

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