Home
Shariar Hasan
Simple OTP box Form

Simple OTP box Form

A Simple OTP form with full responsiveness && dark mode supported

This tailwind example is contributed by Shariar Hasan, on 06-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Input

Author Shariar Hasan

2.2k

Fork Fullscreen

<body class="bg-gray-100 flex flex-col items-center justify-center h-screen w-full dark:bg-gray-900">
  <div class="w-full max-w-md px-8 py-10 bg-white rounded-lg shadow-md dark:bg-gray-950 dark:text-gray-200">
    <h1 class="text-2xl font-semibold text-center mb-6">Enter OTP</h1>
    <p class="text-gray-600 text-center mb-4">Code sent to +880-123456789</p>
    <div class="grid grid-cols-5 gap-x-4 my-2">
      <div contenteditable="true"  class="rounded-lg bg-gray-100 cursor-text dark:bg-gray-800 w-14 aspect-square flex items-center justify-center">
        <span class="text-gray-700 dark:text-gray-400">1</span>
      </div>
      <div contenteditable="true"  class="rounded-lg bg-gray-100 cursor-text dark:bg-gray-800 w-14 aspect-square flex items-center justify-center">
        <span class="text-gray-700 dark:text-gray-400">9</span>
      </div>
      <div contenteditable="true"  class="rounded-lg bg-gray-100 cursor-text dark:bg-gray-800 w-14 aspect-square flex items-center justify-center">
        <span class="text-gray-700 dark:text-gray-400">6</span>
      </div>
      <div contenteditable="true"  class="rounded-lg bg-gray-100 cursor-text dark:bg-gray-800 w-14 aspect-square flex items-center justify-center">
        <span class="text-gray-700 dark:text-gray-400">4</span>
      </div>
      <div contenteditable="true"  class="rounded-lg bg-gray-100 cursor-text dark:bg-gray-800 w-14 aspect-square flex items-center justify-center">
        <span class="text-gray-700 dark:text-gray-400">3</span>
      </div>
    </div>
    <div class="flex items-center flex-col justify-between mb-6">
      <p class="text-gray-600 text-sm">Didn't receive code?</p>
      <div class="flex items-center space-x-2">
        <button class="px-3 py-2 text-sm font-medium text-center rounded text-gray-500 hover:text-blue-500">Request via Call</button>
        <button class="px-3 py-2 text-sm font-medium text-center rounded text-gray-500 hover:text-blue-500">Request Again (00:00:36)</button>
      </div>
    </div>
    <button class="w-full px-4 py-2 text-lg font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">Verify</button>
  </div>
</body>

Related Examples

Search input asasasas
sasasasasas

Author:
Notify ahmedabad

6 months ago

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

Author:
SHARIFUL ISLAM

1 month ago

187
Login form

Author:
Gopi Yadav

2 years ago

10.1k
File upload input section with file preview

Author:
Noob

2 years ago

10.9k
Email input

Author:
Sophia Baker

2 years ago

10k
floting input

Author:
Md. Tofayel islam

1 year ago

2k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

1 month ago

408
File upload with icon

Author:
Fagundo67

2 years ago

16.6k
Toggle button

Author:
Matthew Chen

1 year ago

11.6k
Comment section

Author:
Manuela Bianka

2 years ago

10.5k
Search bar with icon

Author:
Steven Kuhn

2 years ago

14k
Console like input field

Author:
Charlotte Dupont

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components