Gradient Border Input

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

<!-- Gradient Border - Blue Purple -->
<div class="relative p-[2px] rounded-xl bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  <input type="text" placeholder="Enter your name" class="w-full px-4 py-3 bg-white rounded-lg focus:outline-none" />
</div>

<!-- Gradient Border - Cyan Blue -->
<div class="relative p-[2px] mt-4 rounded-xl bg-gradient-to-r from-cyan-400 to-blue-500">
  <input type="email" placeholder="Enter your email" class="w-full px-4 py-3 bg-white rounded-lg focus:outline-none" />
</div>

<!-- Gradient Border - Warm -->
<div class="relative p-[2px] mt-4 rounded-2xl bg-gradient-to-r from-orange-500 via-rose-500 to-purple-500">
  <input type="text" placeholder="Create something amazing" class="w-full px-5 py-4 bg-gray-900 text-white placeholder-gray-500 rounded-2xl focus:outline-none" />
</div>

<!-- Gradient Border - Dark Background -->
<div class="relative p-[2px] mt-4 rounded-lg bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500">
  <div class="px-4 py-3 bg-slate-900 rounded-lg">
    <input type="text" value="Premium Member" class="w-full bg-transparent text-white focus:outline-none" />
  </div>
</div>

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

# Gradient Border Input

Input with gradient border treatment.

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

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