Home
SHARIFUL ISLAM
Elegant OTP Input Fields with TailwindCSS

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 CSS v3. It is responsive.

Input

Author SHARIFUL ISLAM

1.8k

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

Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Author:
Samuel Dawson

3 years ago

18k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

3 years ago

27.6k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k
simple badge

Author:
Muhammad Imran

1 year ago

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

Author:
Nick Girga

10 months ago

684
File input

Author:
Anonymous

2 years ago

7.6k
Single Input newsletter form

Author:
Task Master

3 years ago

10.7k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

17.2k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

15k
Drag and drop image upload with image preview

Author:
Santos78

3 years ago

23.1k
File upload with icon

Author:
Fagundo67

3 years ago

18k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

6 months ago

696

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components