Home
gidy
Verify OTP

Verify OTP

verification code

This tailwind example is contributed by gidy, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Copy code block, Code preview section, Command Preview

Other Code block

Author gidy

171

3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTP Verification</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class'
        }
    </script>
</head>
<body data-theme='dark' class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-700 shadow-2xl rounded-3xl w-full max-w-md overflow-hidden grid md:grid-cols-1 transform transition-transform duration-300 hover:scale-105">
        <div class="p-8 text-center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" class="mx-auto mb-6 w-48 h-48 animate-pulse">
                <circle cx="200" cy="200" r="150" fill="#3B82F6" />
                <circle cx="200" cy="200" r="120" fill="#FFFFFF" />
                <circle cx="200" cy="200" r="90" fill="#3B82F6" />
                <circle cx="200" cy="200" r="60" fill="#FFFFFF" />
                <text x="200" y="200" text-anchor="middle" fill="#2563EB" font-size="40" font-weight="bold" dy=".3em" class="text-center">OTP</text>
            </svg>

<h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-white">Verify OTP</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">Enter the 6-digit code sent to +91 8888888888</p>

<div class="flex justify-center space-x-4 mb-6">
                <input type="text" maxlength="1"
                    class="w-12 h-16 text-center text-2xl border-2 border-blue-500 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-blue-500
                    dark:bg-gray-600 dark:text-white dark:border-blue-400
                    transition-transform duration-300 hover:scale-110">
                <input type="text" maxlength="1"
                    class="w-12 h-16 text-center text-2xl border-2 border-blue-500 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-blue-500
                    dark:bg-gray-600 dark:text-white dark:border-blue-400
                    transition-transform duration-300 hover:scale-110">
                <input type="text" maxlength="1"
                    class="w-12 h-16 text-center text-2xl border-2 border-blue-500 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-blue-500
                    dark:bg-gray-600 dark:text-white dark:border-blue-400
                    transition-transform duration-300 hover:scale-110">
                <input type="text" maxlength="1"
                    class="w-12 h-16 text-center text-2xl border-2 border-blue-500 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-blue-500
                    dark:bg-gray-600 dark:text-white dark:border-blue-400
                    transition-transform duration-300 hover:scale-110">
                <input type="text" maxlength="1"
                    class="w-12 h-16 text-center text-2xl border-2 border-blue-500 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-blue-500
                    dark:bg-gray-600 dark:text-white dark:border-blue-400
                    transition-transform duration-300 hover:scale-110">
                <input type="text" maxlength="1"
                    class="w-12 h-16 text-center text-2xl border-2 border-blue-500 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-blue-500
                    dark:bg-gray-600 dark:text-white dark:border-blue-400
                    transition-transform duration-300 hover:scale-110">
            </div>

<div class="text-sm text-gray-600 dark:text-gray-300 mb-6">
                Didn't receive code??
                <a href="#" class="text-blue-500 hover:underline dark:text-blue-400 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500">Resend OTP</a>
            </div>
<a href="https://abhirajk.vercel.app/" target="">
<button class="w-full py-4 bg-blue-500 text-white rounded-xl hover:bg-blue-600
            transition-transform duration-300 hover:scale-105
            dark:bg-blue-600 dark:hover:bg-blue-700">
                Verify OTP
            </button>
</a>
            
        </div>
    </div>
    
</body>
</html>

Related Examples

Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

8.7k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.2k
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

957
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

7 months ago

984
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
Image Gallery with Alpine.Js

Author:
Maxim

7 months ago

393
Checkbox
Checkbox

Author:
Aman kumar

1 year ago

1.7k
pricing
pricing

Author:
Omer fils ELENGA

2 months ago

279
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

8 months ago

746
Apple Dock Navigation Bar

Author:
Cristian

8 months ago

1.2k
Image - Figure with figcaption design

Author:
Maxim

7 months ago

403
Contact us Form with Responsive

Author:
KULDEEP

2 months ago

193

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1