Verify OTP

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 28-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verify OTP</title>
    
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* Custom fade-in animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }

/* Hide spin buttons for number inputs (optional, for single digit OTP inputs) */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-sm animate-fade-in">
        <h2 class="text-2xl font-bold text-center mb-4 text-gray-800">Verify OTP</h2>
        <p class="text-center text-gray-600 mb-6 text-sm">
            A 6-digit verification code has been sent to your email (or phone number).
        </p>
        <form id="otpForm" action="#" method="POST">
            <div class="flex justify-center space-x-2 mb-6">
                
                <input type="text" id="otp-1" name="otp-1" maxlength="1"
                       class="otp-input w-12 h-12 text-center text-2xl font-bold border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       inputmode="numeric" pattern="[0-9]*" required>
                <input type="text" id="otp-2" name="otp-2" maxlength="1"
                       class="otp-input w-12 h-12 text-center text-2xl font-bold border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       inputmode="numeric" pattern="[0-9]*" required>
                <input type="text" id="otp-3" name="otp-3" maxlength="1"
                       class="otp-input w-12 h-12 text-center text-2xl font-bold border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       inputmode="numeric" pattern="[0-9]*" required>
                <input type="text" id="otp-4" name="otp-4" maxlength="1"
                       class="otp-input w-12 h-12 text-center text-2xl font-bold border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       inputmode="numeric" pattern="[0-9]*" required>
                <input type="text" id="otp-5" name="otp-5" maxlength="1"
                       class="otp-input w-12 h-12 text-center text-2xl font-bold border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       inputmode="numeric" pattern="[0-9]*" required>
                <input type="text" id="otp-6" name="otp-6" maxlength="1"
                       class="otp-input w-12 h-12 text-center text-2xl font-bold border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       inputmode="numeric" pattern="[0-9]*" required>
            </div>

<div class="flex items-center justify-between mb-4">
                <button
                    type="submit"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
                >
                    Verify Code
                </button>
            </div>
            <div class="text-center text-sm">
                <a href="#" class="font-bold text-blue-500 hover:text-blue-800" onclick="alert('Resending OTP...')">
                    Resend Code
                </a>
            </div>
        </form>
        <div class="text-center mt-6">
            <a href="login.html" class="inline-block align-baseline font-bold text-sm text-gray-500 hover:text-gray-800">
                Back to Login
            </a>
        </div>
    </div>

otpInputs.forEach((input, index) => {
                input.addEventListener('input', (e) => {
                    // Move to next input if a digit is entered
                    if (e.data && /^\d$/.test(e.data)) { // Check if input data is a single digit
                        if (index < otpInputs.length - 1) {
                            otpInputs[index + 1].focus();
                        }
                    }
                });

input.addEventListener('keydown', (e) => {
                    // Move to previous input on backspace if current is empty
                    if (e.key === 'Backspace' && input.value === '') {
                        if (index > 0) {
                            otpInputs[index - 1].focus();
                        }
                    }
                });
            });

otpForm.addEventListener('submit', (e) => {
                e.preventDefault(); // Prevent actual form submission for this demo
                let otpCode = '';
                otpInputs.forEach(input => {
                    otpCode += input.value;
                });
                alert('OTP Submitted: ' + otpCode);
                console.log('OTP Submitted:', otpCode);
                // In a real application, you would send otpCode to your server for verification
            });
        });
    </script>
</body>
</html>

Related Examples

NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

Author:
NUNNA VIJAYA KRISHNA

5 days ago

9
Giftcard grid

Author:
ariaw

5 months ago

434
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

5 months ago

246
joker
joker cyber punk

Author:
Baraka Salvator

8 months ago

1.2k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.2k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

330
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

3 months ago

461
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

1.8k
Features Component

Author:
KULDEEP

7 months ago

1.1k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

4 months ago

249
Dionysus AI Chat

Author:
Maxim

4 months ago

553
chatbot
is my chatbot

Author:
Omer fils ELENGA

3 months ago

304

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components