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

3.1k

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

Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

1.9k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

5 months ago

395
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k
Search bar with icon

Author:
Steven Kuhn

3 years ago

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

8 months ago

1.2k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.8k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

4.3k
Console like input field

Author:
Charlotte Dupont

2 years ago

11.6k
time Tailwind CSS and Alpinejs

Author:
Hai mmm

1 year ago

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

Author:
Ameth Galarcio

1 year ago

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

Author:
Nick Girga

4 months ago

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

Author:
Samuel Dawson

2 years ago

17.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components