SingIn / Signup Form

A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

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

Form Login Form

Author Rajesh Maheshwari

Tailwind v3.4 2k 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<body class="bg-black flex items-center justify-center min-h-screen p-4">

<form id="signInForm" class="space-y-4">
            <div>
                <label class="block text-gray-700 font-medium mb-1">Email</label>
                <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="rajesh@email.com">
            </div>
            <div>
                <label class="block text-gray-700 font-medium mb-1">Password</label>
                <input type="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••">
            </div>
            <div class="flex justify-between text-sm text-gray-600">
                <label class="flex items-center space-x-2">
                    <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded">
                    <span>Remember me</span>
                </label>
                <a href="#" class="text-indigo-600 hover:underline">Forgot password?</a>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-lg shadow-md hover:shadow-lg transition">Sign In</button>
        </form>

<form id="signUpForm" class="space-y-4 hidden">
            <div>
                <label class="block text-gray-700 font-medium mb-1">Full Name</label>
                <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Rajesh Maheshwari">
            </div>
            <div>
                <label class="block text-gray-700 font-medium mb-1">Email</label>
                <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="rajesh@email.com">
            </div>
            <div>
                <label class="block text-gray-700 font-medium mb-1">Password</label>
                <input type="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••">
            </div>
            <div>
                <label class="block text-gray-700 font-medium mb-1">Confirm Password</label>
                <input type="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••">
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-lg shadow-md hover:shadow-lg transition">Sign Up</button>
        </form>

<div class="mt-6">
            <p class="text-center text-gray-500">Or continue with</p>
            <div class="mt-4 flex space-x-3">
                
                <button class="flex-1 bg-gray-100 hover:bg-gray-200 transition p-3 rounded-lg flex items-center justify-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" class="h-5">
                </button>
                <button class="flex-1 bg-gray-100 hover:bg-gray-200 transition p-3 rounded-lg flex items-center justify-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" class="h-5">
                </button>
            </div>
        </div>

</div>

signInTab.addEventListener("click", () => {
            signInForm.classList.remove("hidden");
            signUpForm.classList.add("hidden");
            signInTab.classList.add("text-indigo-600", "border-indigo-500");
            signUpTab.classList.remove("text-indigo-600", "border-indigo-500");
        });

signUpTab.addEventListener("click", () => {
            signUpForm.classList.remove("hidden");
            signInForm.classList.add("hidden");
            signUpTab.classList.add("text-indigo-600", "border-indigo-500");
            signInTab.classList.remove("text-indigo-600", "border-indigo-500");
        });
    </script>

</body>
</html>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12.1k