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

749

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

Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

8 months ago

1.3k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

10 months ago

1.2k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

6 months ago

875
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

8 months ago

593
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

4 months ago

451
hello world
by salvator

Author:
Anonymous

7 months ago

525
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.4k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

8 months ago

697
Chatbox template

Author:
Lucas Martinez

2 years ago

12.4k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.6k
nft card
nft card

Author:
5upreme505

1 year ago

1.8k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

5 months ago

402

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components