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

794

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

Tailwind invoice example

Author:
Elijah Davis

3 years ago

19.2k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

3 months ago

430
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.7k
Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

4 months ago

449
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 year ago

3.3k
color blur
blur

Author:
BocchiChan

1 year ago

1.8k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

3 months ago

597
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 year ago

1.4k
Button
Button with scale animation on hover and translate-y on active

Author:
Nabile BABABODI ABOUDOU MOUTAROU

2 months ago

79
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

11 months ago

1.6k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.8k
3d element

Author:
Omer fils ELENGA

3 months ago

194

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components