Neumorphism 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

<!-- Neumorphism - Light -->
<div class="p-8 bg-gray-200 rounded-2xl">
  <div class="relative">
    <input type="text" placeholder="Username" class="w-full px-5 py-4 bg-gray-200 rounded-xl text-gray-700 placeholder-gray-400 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-400/50 transition-all" />
  </div>
</div>

<!-- Neumorphism - Raised -->
<div class="p-8 bg-gray-200 rounded-2xl">
  <div class="relative mt-4">
    <input type="email" placeholder="Email address" class="w-full px-5 py-4 bg-gray-200 rounded-xl text-gray-700 placeholder-gray-400 shadow-[inset_2px_2px_5px_rgba(0,0,0,0.1),inset_-2px_-2px_5px_rgba(255,255,255,0.8)] focus:outline-none focus:ring-2 focus:ring-purple-400/50 transition-all" />
  </div>
</div>

<!-- Neumorphism - Convex -->
<div class="p-8 bg-gray-200 rounded-2xl">
  <div class="relative mt-4">
    <input type="password" placeholder="Password" class="w-full px-5 py-4 bg-gray-200 rounded-xl text-gray-700 placeholder-gray-400 shadow-[5px_5px_10px_rgba(0,0,0,0.1),-5px_-5px_10px_rgba(255,255,255,0.8)] focus:outline-none focus:ring-2 focus:ring-green-400/50 transition-all" />
  </div>
</div>

<!-- Neumorphism - Dark -->
<div class="p-8 mt-4 bg-slate-800 rounded-2xl">
  <div class="relative">
    <input type="text" placeholder="Search..." class="w-full px-5 py-4 bg-slate-700 rounded-xl text-gray-200 placeholder-gray-500 shadow-[inset_2px_2px_5px_rgba(0,0,0,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.05)] focus:outline-none focus:ring-2 focus:ring-blue-400/50 transition-all" />
  </div>
</div>

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

# Neumorphism Input

Neumorphic text input.

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

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