Credit Card 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
43
44
45
46
47
48

<!-- Credit Card - Visual -->
<div class="p-6 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl max-w-sm">
  <div class="flex justify-between items-start mb-8">
    <div class="w-12 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded"></div>
    <svg class="w-10 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 16"><path d="M9.516 8.004c-1.945 0-3.39 1.016-3.39 2.496 0 1.472 1.437 2.488 3.39 2.488 1.945 0 3.382-1.016 3.382-2.488 0-1.472-1.437-2.496-3.382-2.496zm0 4.264c-1.077 0-1.808-.552-1.808-1.768 0-1.224.731-1.776 1.808-1.776 1.085 0 1.8.552 1.8 1.776 0 1.216-.715 1.768-1.8 1.768z"/></svg>
  </div>
  <div class="space-y-4">
    <div>
      <label class="block text-xs text-gray-400 mb-1">Card Number</label>
      <input type="text" placeholder="1234 5678 9012 3456" class="w-full bg-transparent border-b border-gray-600 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-400 transition-colors tracking-widest" />
    </div>
    <div class="flex gap-4">
      <div class="flex-1">
        <label class="block text-xs text-gray-400 mb-1">Cardholder Name</label>
        <input type="text" placeholder="John Doe" class="w-full bg-transparent border-b border-gray-600 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-400 transition-colors" />
      </div>
      <div class="w-20">
        <label class="block text-xs text-gray-400 mb-1">CVV</label>
        <input type="text" placeholder="123" class="w-full bg-transparent border-b border-gray-600 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-400 transition-colors" />
      </div>
    </div>
  </div>
</div>

<!-- Credit Card - Form Fields -->
<div class="mt-6 p-6 bg-white rounded-xl border border-gray-200 max-w-sm">
  <div class="flex items-center gap-3 mb-6">
    <div class="w-10 h-6 bg-blue-600 rounded"></div>
    <div class="w-10 h-6 bg-red-500 rounded -ml-4"></div>
    <span class="text-sm text-gray-600">Credit / Debit Card</span>
  </div>
  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
      <input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 tracking-wider" />
    </div>
    <div class="grid grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Expiration</label>
        <input type="text" placeholder="MM/YY" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
        <input type="text" placeholder="123" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
    </div>
  </div>
</div>

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

# Credit Card

Credit card number input layout.

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

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