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

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

Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

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

Author:
Pixel Perfect

1 year ago

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

Author:
Md. Tofayel islam

9 months ago

1.8k
Custom Carosel

Author:
Md. Tofayel islam

9 months ago

2.1k
Login Form
Login Form

Author:
Md. Tofayel islam

9 months ago

1.6k
test2

Author:
SHAHAD EIDAH ALHAERTHI

9 months ago

1.2k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

15.9k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

2 years ago

16.7k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

8 months ago

1.3k
Product Form - Reverie

Author:
S V

1 month ago

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

Author:
Ameth Galarcio

11 months ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components