Home
Uwera Dorcas
Login AND Signup

Login AND Signup

This tailwind example is contributed by Uwera Dorcas, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Uwera Dorcas

178

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Signup Form</title>
    <style>
        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        /* Form Container */
        .auth-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 450px;
            overflow: hidden;
            position: relative;
        }
        
        /* Toggle Switch */
        .auth-toggle {
            display: flex;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .auth-toggle-btn {
            flex: 1;
            padding: 18px;
            text-align: center;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            background: none;
            border: none;
            font-size: 1.1rem;
            color: #64748b;
        }
        
        .auth-toggle-btn.active {
            color: #3b82f6;
            position: relative;
        }
        
        .auth-toggle-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: #3b82f6;
            border-radius: 3px 3px 0 0;
        }
        
        /* Form Styles */
        .auth-form {
            padding: 30px;
            display: none;
        }
        
        .auth-form.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .form-title {
            font-size: 1.8rem;
            color: #1e293b;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .form-subtitle {
            color: #64748b;
            text-align: center;
            margin-bottom: 30px;
            font-size: 1rem;
        }
        
        .input-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #334155;
        }
        
        .input-group input {
            width: 100%;
            padding: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.3s ease;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 40px;
            cursor: pointer;
            color: #64748b;
        }
        
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
        }
        
        .remember-me input {
            margin-right: 8px;
        }
        
        .forgot-password {
            color: #3b82f6;
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        .submit-btn {
            width: 100%;
            padding: 14px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .submit-btn:hover {
            background: #2563eb;
        }
        
        .social-login {
            margin: 25px 0;
            text-align: center;
            position: relative;
        }
        
        .social-login::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background: #e2e8f0;
            z-index: 1;
        }
        
        .social-login span {
            background: white;
            padding: 0 15px;
            position: relative;
            z-index: 2;
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            background: #f1f5f9;
            transform: translateY(-2px);
        }
        
        .form-footer {
            text-align: center;
            margin-top: 20px;
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .form-footer a {
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500;
        }
        
        /* Responsive */
        @media (max-width: 480px) {
            .auth-container {
                border-radius: 0;
                box-shadow: none;
            }
            
            body {
                padding: 0;
                background: white;
            }
        }
    </style>
</head>
<body>
    <div class="auth-container">
        <div class="auth-toggle">
            <button class="auth-toggle-btn active" id="login-toggle">Login</button>
            <button class="auth-toggle-btn" id="signup-toggle">Sign Up</button>
        </div>
        
        
        <form class="auth-form active" id="login-form">
            <h2 class="form-title">Welcome Back</h2>
            <p class="form-subtitle">Please enter your details to sign in</p>
            
            <div class="input-group">
                <label for="login-email">Email</label>
                <input type="email" id="login-email" placeholder="Enter your email" required>
            </div>
            
            <div class="input-group">
                <label for="login-password">Password</label>
                <input type="password" id="login-password" placeholder="Enter your password" required>
                <span class="password-toggle" onclick="togglePassword('login-password')">👁️</span>
            </div>
            
            <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember-me">
                    <label for="remember-me">Remember me</label>
                </div>
                <a href="#" class="forgot-password">Forgot password?</a>
            </div>
            
            <button type="submit" class="submit-btn">Sign In</button>
            
            <div class="social-login">
                <span>Or continue with</span>
                <div class="social-icons">
                    <div class="social-icon">G</div>
                    <div class="social-icon">f</div>
                    <div class="social-icon">in</div>
                </div>
            </div>
            
            <div class="form-footer">
                Don't have an account? <a href="#" id="switch-to-signup">Sign up</a>
            </div>
        </form>
        
        
        <form class="auth-form" id="signup-form">
            <h2 class="form-title">Create Account</h2>
            <p class="form-subtitle">Get started with your free account</p>
            
            <div class="input-group">
                <label for="signup-name">Full Name</label>
                <input type="text" id="signup-name" placeholder="Enter your full name" required>
            </div>
            
            <div class="input-group">
                <label for="signup-email">Email</label>
                <input type="email" id="signup-email" placeholder="Enter your email" required>
            </div>
            
            <div class="input-group">
                <label for="signup-password">Password</label>
                <input type="password" id="signup-password" placeholder="Create a password" required>
                <span class="password-toggle" onclick="togglePassword('signup-password')">👁️</span>
            </div>
            
            <div class="input-group">
                <label for="signup-confirm-password">Confirm Password</label>
                <input type="password" id="signup-confirm-password" placeholder="Confirm your password" required>
                <span class="password-toggle" onclick="togglePassword('signup-confirm-password')">👁️</span>
            </div>
            
            <div class="remember-me" style="margin-bottom: 20px;">
                <input type="checkbox" id="terms-agree" required>
                <label for="terms-agree">I agree to the <a href="#" style="color: #3b82f6;">Terms</a> and <a href="#" style="color: #3b82f6;">Privacy Policy</a></label>
            </div>
            
            <button type="submit" class="submit-btn">Create Account</button>
            
            <div class="social-login">
                <span>Or sign up with</span>
                <div class="social-icons">
                    <div class="social-icon">G</div>
                    <div class="social-icon">f</div>
                    <div class="social-icon">in</div>
                </div>
            </div>
            
            <div class="form-footer">
                Already have an account? <a href="#" id="switch-to-login">Sign in</a>
            </div>
        </form>
    </div>

Related Examples

Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

357
Heading Style

Author:
KULDEEP

3 weeks ago

133
Forgot password?
you can change password an time

Author:
gidy

1 month ago

172
profile
user profile

Author:
gidy

1 month ago

8
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

2 months ago

224
News feed

Author:
Bunny

2 years ago

13.2k
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

2 weeks ago

31
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

4 months ago

1.5k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

11 months ago

2.8k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

1 month ago

230
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

597
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 week ago

59

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components