Glassmorphism 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
26
27
28

<!-- Glassmorphism - Light Background -->
<div class="relative p-6 bg-gradient-to-br from-purple-100 via-pink-50 to-blue-100 rounded-2xl">
  <div class="relative">
    <input type="text" placeholder="Search..." class="w-full px-5 py-4 bg-white/40 backdrop-blur-md border border-white/50 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white/80 focus:bg-white/60 transition-all" />
  </div>
</div>

<!-- Glassmorphism - Dark Background -->
<div class="relative p-6 mt-4 bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 rounded-2xl">
  <div class="relative">
    <input type="text" placeholder="Enter your email" class="w-full px-5 py-4 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/40 focus:bg-white/20 transition-all" />
  </div>
</div>

<!-- Glassmorphism - Blur Effect -->
<div class="relative p-6 mt-4 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-2xl">
  <div class="relative">
    <input type="text" placeholder="Subscribe to newsletter" class="w-full px-5 py-4 bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/50 focus:bg-white/30 transition-all" />
  </div>
</div>

<!-- Glassmorphism - Card -->
<div class="relative p-6 mt-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl">
  <div class="space-y-4">
    <input type="text" placeholder="Username" class="w-full px-4 py-3 bg-white/30 backdrop-blur-sm border border-white/40 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white/80 transition-all" />
    <input type="password" placeholder="Password" class="w-full px-4 py-3 bg-white/30 backdrop-blur-sm border border-white/40 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white/80 transition-all" />
  </div>
</div>

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

# Glassmorphism Input

Glassmorphic text input.

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

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