OTP 6-Digit 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

<!-- OTP 6-Digit - Standard -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-3 text-center">Enter verification code</label>
  <div class="flex justify-center gap-2 sm:gap-3">
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-white border-2 border-gray-300 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-white border-2 border-gray-300 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-white border-2 border-gray-300 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-white border-2 border-gray-300 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-white border-2 border-gray-300 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-white border-2 border-gray-300 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
  </div>
  <p class="mt-4 text-sm text-gray-500 text-center">Code sent to your email</p>
</div>

<!-- OTP 6-Digit - Dark -->
<div class="mt-6 p-6 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-300 mb-3 text-center">Enter 2FA Code</label>
  <div class="flex justify-center gap-2 sm:gap-3">
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-slate-800 border-2 border-slate-600 rounded-lg text-center text-xl font-bold text-white focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-slate-800 border-2 border-slate-600 rounded-lg text-center text-xl font-bold text-white focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-slate-800 border-2 border-slate-600 rounded-lg text-center text-xl font-bold text-white focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-colors" />
    <input type="text" maxlength="1" class="w-10 h-12 sm:w-12 sm:h-14 bg-slate-800 border-2 border-slate-600 rounded-lg text-center text-xl font-bold text-white focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-colors" />
  </div>
</div>

<!-- OTP 6-Digit - With Resend -->
<div class="mt-6 text-center">
  <label class="block text-sm font-medium text-gray-700 mb-3">One-Time Password</label>
  <div class="flex justify-center gap-2 mb-4">
    <input type="text" maxlength="1" class="w-11 h-13 bg-white border-2 border-gray-200 rounded-xl text-center text-lg font-bold focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-11 h-13 bg-white border-2 border-gray-200 rounded-xl text-center text-lg font-bold focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-11 h-13 bg-white border-2 border-gray-200 rounded-xl text-center text-lg font-bold focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-11 h-13 bg-white border-2 border-gray-200 rounded-xl text-center text-lg font-bold focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/20 transition-colors" />
  </div>
  <p class="text-sm text-gray-500">Didn't receive the code? <button class="text-blue-600 hover:text-blue-700 font-medium shrink-0 whitespace-nowrap">Resend</button></p>
</div>

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

# OTP 6 Digit

Six-digit OTP input.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/otp-6-digit
```
Copy from `code.html`.

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