Currency 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!-- Currency Input - Dollar -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Amount (USD)</label>
  <div class="relative">
    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 font-medium">$</span>
    <input type="number" placeholder="0.00" class="w-full pl-8 pr-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  </div>
</div>

<!-- Currency Input - Euro -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Amount (EUR)</label>
  <div class="relative">
    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 font-medium">€</span>
    <input type="number" placeholder="0.00" class="w-full pl-8 pr-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" />
  </div>
</div>

<!-- Currency Input - Multi-currency -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Budget</label>
  <div class="flex gap-3">
    <select class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
      <option>$ USD</option><option>€ EUR</option><option>£ GBP</option><option>¥ JPY</option>
    </select>
    <input type="number" placeholder="1,000" class="flex-1 min-w-0 px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
</div>

<!-- Currency Input - Display -->
<div class="mt-4 p-4 bg-gradient-to-br from-emerald-500 to-green-600 rounded-xl">
  <label class="block text-sm font-medium text-white/80 mb-2">Donation Amount</label>
  <div class="flex items-center">
    <span class="text-3xl font-bold text-white mr-2">$</span>
    <input type="number" value="50" class="text-3xl font-bold bg-transparent text-white placeholder-white/50 focus:outline-none w-full" />
  </div>
  <div class="flex gap-2 mt-3">
    <button class="px-4 py-2 bg-white/20 text-white text-sm font-medium rounded-lg hover:bg-white/30 transition-colors shrink-0 whitespace-nowrap">$25</button>
    <button class="px-4 py-2 bg-white text-emerald-700 text-sm font-medium rounded-lg hover:bg-emerald-50 transition-colors shrink-0 whitespace-nowrap">$50</button>
    <button class="px-4 py-2 bg-white/20 text-white text-sm font-medium rounded-lg hover:bg-white/30 transition-colors shrink-0 whitespace-nowrap">$100</button>
  </div>
</div>

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

# Currency Input

Currency amount input.

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

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