Elegant OTP Input Fields with TailwindCSS

A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

This tailwind example is contributed by SHARIFUL ISLAM, on 06-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Input

Author SHARIFUL ISLAM

Tailwind v3.4 2.3k 3

Fork Fullscreen

<div class="flex flex-col items-center justify-center h-screen space-y-5">
  <h1 class="font-bold text-3xl text-green-500">Submit OTP</h1>
  <div class="flex items-center gap-2.5 justify-center" id="otp-container">
    <input
      type="text"
      maxlength="1"
      class="w-16 h-16 font-semibold outline-none text-xl text-gray-700 text-center border rounded-md transition-all bg-gray-100 border-gray-300 focus:border-blue-500"
    />
    <input
      type="text"
      maxlength="1"
      class="w-16 h-16 font-semibold outline-none text-xl text-gray-700 text-center border rounded-md transition-all bg-gray-100 border-gray-300 focus:border-blue-500"
    />
    <input
      type="text"
      maxlength="1"
      class="w-16 h-16 font-semibold outline-none text-xl text-gray-700 text-center border rounded-md transition-all bg-gray-100 border-gray-300 focus:border-blue-500"
    />
    <input
      type="text"
      maxlength="1"
      class="w-16 h-16 font-semibold outline-none text-xl text-gray-700 text-center border rounded-md transition-all bg-gray-100 border-gray-300 focus:border-blue-500"
    />
    <input
      type="text"
      maxlength="1"
      class="w-16 h-16 font-semibold outline-none text-xl text-gray-700 text-center border rounded-md transition-all bg-gray-100 border-gray-300 focus:border-blue-500"
    />
    <input
      type="text"
      maxlength="1"
      class="w-16 h-16 font-semibold outline-none text-xl text-gray-700 text-center border rounded-md transition-all bg-gray-100 border-gray-300 focus:border-blue-500"
    />
  </div>
</div>

otpInputs.forEach((input, index) => {
    input.addEventListener("input", (e) => {
      const value = e.target.value;
      if (/^\d$/.test(value)) {
        if (index < otpInputs.length - 1) {
          otpInputs[index + 1].focus();
        }
      } else {
        e.target.value = "";
      }
    });

input.addEventListener("keydown", (e) => {
      if (e.key === "Backspace" && e.target.value === "" && index > 0) {
        otpInputs[index - 1].focus();
      }
    });
  });
</script>

Related Examples

Domain For Sale Template
Domain For Sale Template

Geoffrey Callaghan

2 years ago

5.1k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.6k
Maintenance mode

Maxim

2 years ago

4.8k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Shariar Hasan

2 years ago

4.2k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.3k
Product Form - Reverie

S V

1 year ago

1.3k
Custom Carosel

Md. Tofayel islam

2 years ago

3.9k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Maxim

1 year ago

2.9k
Form with multiple Inputs.

JUGENDRA GANGWAR

3 months ago

607
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Nick Girga

1 year ago

1.3k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
File input

Anonymous

2 years ago

8.2k