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

17.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.3k
Forgot password form
Useful form for sending password reset link

Author:
Steven Kuhn

2 years ago

19.9k
User registration form

Author:
Leon Bachmann

2 years ago

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

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

Author:
Rafferty Kim

2 years ago

10.4k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

14.4k
Survey form
User survey form

Author:
JaxStone

2 years ago

15.3k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.1k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

38.7k
Reservation form

Author:
Lukas Müller

2 years ago

12.9k
Appointment booking form

Author:
Ho O

5 months ago

681
Responsive contact us section

Author:
Geoffrey Callaghan

1 year ago

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components