Simple Sign-Up Form with Clean Design with TailwindCSS

Simple Sign-Up Form with Clean Design with 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 - Simple Sign-Up Form with Clean Design with TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10</head>
11
12<body class="flex h-screen items-center justify-center bg-[#edfafd]">
13
14    <div class="border border-gray-100 shadow w-[360px] p-8 rounded-md bg-white">
15        <div class="flex justify-between text-sm">
16            <div class="flex items-center gap-2">
17                <div class="h-3 w-3 bg-blue-600"></div>
18                <p class="font-bold pb-[2px]">Company</p>
19            </div>
20            <div>
21                <p>Have an account? <a class="font-semibold text-blue-600 hover:underline" href="#">Log in</a></p>
22            </div>
23        </div>
24
25        <div class="mt-10">
26            <h1 class="text-2xl font-semibold">Manage your produce business with us!</h1>
27        </div>
28
29        <p class="text-sm mt-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, ea?</p>
30
31        <div class="mt-6">
32            <input
33                class="p-2 px-3 border-b-[2px] focus:border-blue-400 w-full outline-none bg-white transition duration-300"
34                type="text" placeholder="Email">
35            <input
36                class="p-2 px-3 mt-3 border-b-[2px] focus:border-blue-400 w-full outline-none bg-white transition duration-300"
37                type="password" placeholder="Password">
38        </div>
39
40        <div class="mt-4 flex items-center">
41            <input id="terms" type="checkbox" class="h-3 w-3 border-gray-300 focus:ring-blue-500 text-blue-600">
42            <label for="terms" class="ml-2 text-sm text-gray-600">
43                I agree to the <a href="#" class="text-blue-600 hover:underline">Terms and Conditions</a>
44            </label>
45        </div>
46
47        <button
48            class="bg-blue-600 text-white text-sm h-10 w-[130px] rounded-md font-semibold mt-5 shadow-md hover:bg-blue-700 transition duration-300 hover:scale-105"
49            type="submit">Get Started</button>
50    </div>
51
52</body>
53
54</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.