Dark Mode Signup Form Design using TailwindCSS

Dark Mode Signup Form Design 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/30/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<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>SudhuCodes - Dark Mode Signup Form Design using TailwindCSS</title>
8    <script src="https://cdn.tailwindcss.com"></script>
9    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
10</head>
11<body class="min-h-screen flex items-center justify-center bg-gray-900">
12
13    <div class="w-[360px] px-6 py-8 bg-gray-800 rounded-lg shadow-lg">
14        <h1 class="text-3xl text-center font-semibold text-white pb-6">Sign Up</h1>
15        
16        <div class="flex flex-col mb-4">
17            <label for="email" class="text-gray-300 mb-2">Email</label>
18            <input id="email" type="email" placeholder="Enter your email" class="bg-gray-700 text-white p-3 rounded outline-none focus:ring-1 focus:ring-indigo-500">
19        </div>
20        
21        <div class="flex flex-col mb-4">
22            <label for="password" class="text-gray-300 mb-2">Password</label>
23            <input id="password" type="password" placeholder="Enter your password" class="bg-gray-700 text-white p-3 rounded outline-none focus:ring-1 focus:ring-indigo-500">
24        </div>
25        
26        <div class="flex flex-col mb-6">
27            <label for="confirmPassword" class="text-gray-300 mb-2">Confirm Password</label>
28            <input id="confirmPassword" type="password" placeholder="Confirm your password" class="bg-gray-700 text-white p-3 rounded outline-none focus:ring-1 focus:ring-indigo-500">
29        </div>
30        
31        <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold p-3 rounded transition-colors">Create New Account</button>
32        
33        <div class="text-center mt-6">
34            <p class="text-gray-400">Already have an account? 
35                <a href="#" class="text-indigo-400 hover:text-indigo-500 underline">Login here</a>
36            </p>
37        </div>
38    </div>
39
40</body>
41</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.