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

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