Verify otp form

This tailwind example is contributed by Jakub Novak, on 13-May-2023. Component is made with Tailwind v3.4. It is responsive.

Form

Author Jakub Novak

Tailwind v3.4 18.8k 11

Fork Fullscreen

<div class="max-w-md mx-auto border max-w-sm mt-20 rounded">
    <form class="shadow-md px-4 py-6">
        <div class="flex justify-center gap-2 mb-6">
            <input class="w-12 h-12 text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500" type="text" maxlength="1" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code" required>
            <input class="w-12 h-12 text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500" type="text" maxlength="1" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code" required>
            <input class="w-12 h-12 text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500" type="text" maxlength="1" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code" required>
            <input class="w-12 h-12 text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500" type="text" maxlength="1" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code" required>
        </div>
        <div class="flex items-center justify-center">
            <button class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
                Verify
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-teal-500 hover:text-teal-800 ml-4" href="#">
                Resend OTP
            </a>
        </div>
    </form>
</div>

Related Examples

Confirm OTP Form
can be used as a reset password form

Santos78

3 years ago

11.6k
Forgot password form
Useful form for sending password reset link

Steven Kuhn

4 years ago

22.1k
User registration form

Leon Bachmann

3 years ago

25.8k
Otp form
SImple opt form with resend and verify button

Rafferty Kim

3 years ago

11.7k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k
Survey form
User survey form

JaxStone

3 years ago

17.6k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Reservation form

Lukas Müller

3 years ago

14.5k
Radio Input Group
Just fancy radio input group

farid

1 year ago

999
Responsive login form
form with social login buttons

Anonymous

8 months ago

553