Stylish OTP Verification with Gradient Hover Effects Using TailwindCSS

Stylish OTP Verification with Gradient Hover Effects Using TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/9/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Stylish OTP Verification with Gradient Hover Effects Using TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11    <link
12        href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
13        rel="stylesheet">
14</head>
15
16<body class="font-['Ubuntu'] grid place-items-center min-h-screen bg-[#212121] text-white">
17
18    <div class="relative group flex items-center justify-center cursor-pointer">
19
20        <div class="h-[253.5px] group-hover:opacity-100 opacity-0 transition duration-500 rounded-[9px] w-[323.5px] absolute -z-1"
21            style="background: conic-gradient(from 180deg at center, #ff5f6d, #ffc371, #ffd700, #32cd32, #00fa9a, #1e90ff, #9370ff, #ff5f6d);">
22        </div>
23
24        <div class="bg-[#171717] z-10 p-8 w-[320px] rounded-lg h-[250px] flex flex-col items-center justify-center">
25            <h1 class="pb-6 text-2xl font-medium tracking-wide text-center">Enter OTP Code<i
26                    class="fa-solid fa-message pl-2 text-xl text-indigo-400"></i></h1>
27            <form class="flex gap-4">
28                <input
29                    class="w-10 h-11 text-gray-800 bg-gray-200 outline-none p-4 rounded-lg text-center text-xl focus:ring-1 focus:ring-indigo-500"
30                    type="text" maxlength="1">
31                <input
32                    class="w-10 h-11 text-gray-800 bg-gray-200 outline-none p-4 rounded-lg text-center text-xl focus:ring-1 focus:ring-indigo-500"
33                    type="text" maxlength="1">
34                <input
35                    class="w-10 h-11 text-gray-800 bg-gray-200 outline-none p-4 rounded-lg text-center text-xl focus:ring-1 focus:ring-indigo-500"
36                    type="text" maxlength="1">
37                <input
38                    class="w-10 h-11 text-gray-800 bg-gray-200 outline-none p-4 rounded-lg text-center text-xl focus:ring-1 focus:ring-indigo-500"
39                    type="text" maxlength="1">
40            </form>
41            <div class="pt-8 w-full flex justify-center">
42                <button
43                    class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-2 rounded-full text-sm font-medium shadow-md">Verify
44                    now</button>
45            </div>
46        </div>
47
48    </div>
49
50</body>
51
52</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.