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

16.7k

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

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

Author:
Steven Kuhn

2 years ago

19.3k
User registration form

Author:
Leon Bachmann

2 years ago

21.2k
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

2 years ago

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

Author:
Rafferty Kim

1 year ago

10.2k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

14.1k
Survey form
User survey form

Author:
JaxStone

2 years ago

15k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

14.6k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

36.3k
Reservation form

Author:
Lukas Müller

2 years ago

12.4k
Responsive contact us section
responsive contact section

Author:
Geoffrey Callaghan

1 year ago

6.2k
Profile Form
Stunning Profile and Cover Image Fields

Author:
Samuel Abera

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components