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

603

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

Restaurant menu card

Author:
Anonymous

1 year ago

3.5k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

5 months ago

672
nft card
nft card

Author:
5upreme505

1 year ago

1.7k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

5 months ago

419
Lots of button examples
tailwind button examples

Author:
QQ-VVN

5 months ago

417
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

185
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

7 months ago

789
Chat Bot

Author:
Md. Tofayel islam

3 months ago

324
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

5 months ago

753
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

4 months ago

1.3k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.2k
News feed

Author:
Bunny

2 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components