Home
Jakub Novak
Verify otp form

Verify otp form

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

Form

Author Jakub Novak

18.2k

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

Author:
Santos78

2 years ago

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

Author:
Steven Kuhn

3 years ago

21.5k
User registration form

Author:
Leon Bachmann

3 years ago

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

Author:
Rafferty Kim

2 years ago

10.9k
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.

Author:
Bunny

3 years ago

50.1k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

15k
Survey form
User survey form

Author:
JaxStone

3 years ago

16.9k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

3 years ago

15.9k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

3 years ago

45k
Reservation form

Author:
Lukas Müller

3 years ago

14k
User registration form

Author:
Laurits

3 years ago

11.7k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

4.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components