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

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

Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2.1k
Sign in / Login Form

Author:
Bunny

3 years ago

13.7k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4.2k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

1 year ago

2.2k
Single Input newsletter form

Author:
Task Master

3 years ago

10.7k
Email input

Author:
Sophia Baker

3 years ago

11.2k
Stacked Checkboxes

Author:
kishan pc

1 year ago

3.1k
Product Form - Reverie

Author:
S V

8 months ago

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

Author:
Shariar Hasan

1 year ago

3.5k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

2.9k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

8 months ago

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

Author:
Maxim

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components