Home
Rajesh Maheshwari
Sign up form

Sign up form

This tailwind example is contributed by Rajesh Maheshwari, on 04-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Card Form Login Form

Author Rajesh Maheshwari

867

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<body class="bg-blue-50 flex items-center justify-center min-h-screen">
    <div class="bg-white p-10 rounded-lg shadow-lg w-full max-w-lg">
        <h2 class="text-3xl font-semibold mb-6 text-center text-gray-800">Create an Account</h2>
        <form action="#" method="POST">
            <div class="mb-5">
                <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
                <input type="text" id="name" name="name" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-5">
                <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
                <input type="email" id="email" name="email" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-5">
                <label for="password" class="block text-gray-700 font-medium mb-2">Password</label>
                <input type="password" id="password" name="password" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-5">
                <label for="confirm_password" class="block text-gray-700 font-medium mb-2">Confirm Password</label>
                <input type="password" id="confirm_password" name="confirm_password" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="flex items-center mb-5">
                <input type="checkbox" id="terms" name="terms" class="mr-2">
                <label for="terms" class="text-gray-700">I agree to the <a href="#" class="text-blue-500 hover:underline">terms and conditions</a></label>
            </div>
            <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-300">Register</button>
        </form>
        <p class="mt-6 text-center text-gray-600">Already have an account? <a href="#" class="text-blue-500 hover:underline">Sign in</a></p>
    </div>
</body>
</html>

Related Examples

Contact us section
Minimal contact us form

Author:
Geoffrey Callaghan

2 years ago

5.6k
Sign-in form - Htmlwind
Simple login form

Author:
Htmlwind

6 months ago

526
Instagram Login Clone
login form and signup

Author:
gidy

6 months ago

432
Profile card

Author:
Mr Robot

2 years ago

12.6k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

2 years ago

6.4k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

3.9k
Article Card

Author:
Anonymous

1 year ago

2.5k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

1 year ago

2.4k
cards
group of cards

Author:
TakaMorY

3 months ago

351
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12k
less is more
less is more by salvator

Author:
Baraka Salvator

5 months ago

844
Profile Form
Stunning Profile and Cover Image Fields

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components