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

883

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

Comment section

Author:
Manuela Bianka

2 years ago

10.7k
Textarea

Author:
Ron Hicks

2 years ago

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

Author:
Shariar Hasan

1 year ago

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

Author:
Ameth Galarcio

11 months ago

1.6k
File upload input section with file preview

Author:
Noob

2 years ago

11.3k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

11 months ago

3.4k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

11 months ago

1.8k
Simple range slider

Author:
Nour Haider

1 year ago

14.6k
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

11.4k
Single Input newsletter form

Author:
Task Master

2 years ago

10.2k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

9 months ago

2k
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

1 year ago

4.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components