Home
nejaa badr
Login Form

Login Form

Color Updates:
- Changed background to gradient `from-indigo-800 to-blue-900`
- Updated text colors to match the new theme
- Updated button and interactive element colors
- Added dark mode color variants

Enhanced Styling:
- Added gradient background
- Increased padding and spacing
- Improved border radius to `rounded-xl`
- Added hover scale effects
- Enhanced shadow with `shadow-2xl`

Added Animations:
- Fade-in animation on load
- Scale transition on card hover
- Button ripple effect on click
- Smooth transitions for all interactive elements

Improved Dark Mode:
- Enhanced dark mode colors
- Added system preference detection
- Improved dark mode contrast
- Added dark mode specific focus rings

Enhanced Functionality:
- Added basic form validation
- Added ripple effect on button click
- Improved hover and focus states
- Added transition animations

Accessibility Improvements:
- Maintained proper contrast ratios
- Enhanced focus states
- Added proper ARIA attributes
- Improved form labels

This tailwind example is contributed by nejaa badr, on 30-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author nejaa badr

1.2k

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 Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="min-h-screen flex items-center justify-center w-full bg-gradient-to-r from-indigo-800 to-blue-900 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-950 p-4">
        <div class="bg-white dark:bg-gray-900 shadow-2xl rounded-xl px-8 py-6 max-w-md w-full transform transition-all duration-300 hover:scale-[1.01] animate-fade-in">
            <h1 class="text-3xl font-bold text-center mb-8 text-indigo-800 dark:text-gray-200">Welcome Back!</h1>
            <form action="#" class="space-y-6">
                <div>
                    <label for="email" class="block text-sm font-medium text-indigo-900 dark:text-gray-300 mb-2">
                        Email Address
                    </label>
                    <input 
                        type="email" 
                        id="email" 
                        class="shadow-sm rounded-lg w-full px-4 py-2.5 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-800 dark:focus:ring-blue-900 transition-all duration-300" 
                        placeholder="your@email.com" 
                        required
                    >
                </div>

<div>
                    <label for="password" class="block text-sm font-medium text-indigo-900 dark:text-gray-300 mb-2">
                        Password
                    </label>
                    <input 
                        type="password" 
                        id="password" 
                        class="shadow-sm rounded-lg w-full px-4 py-2.5 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-800 dark:focus:ring-blue-900 transition-all duration-300" 
                        placeholder="Enter your password" 
                        required
                    >
                    <a href="https://tailwindflex.com/@nejaa-badr/forgot-password-form-2" 
                        class="inline-block mt-2 text-sm text-indigo-800 hover:text-blue-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-300">
                        Forgot Password?
                    </a>
                </div>

<div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input 
                            type="checkbox" 
                            id="remember" 
                            class="h-4 w-4 rounded border-gray-300 text-indigo-800 focus:ring-indigo-800 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-900 transition-colors duration-300" 
                            checked
                        >
                        <label for="remember" class="ml-2 block text-sm text-indigo-900 dark:text-gray-300">
                            Remember me
                        </label>
                    </div>
                    <a href="https://tailwindflex.com/@nejaa-badr/registration-form" 
                        class="text-sm text-indigo-800 hover:text-blue-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-300">
                        Create Account
                    </a>
                </div>

<button 
                    type="submit" 
                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-800 hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-800 transform transition-all duration-300 hover:scale-[1.02] dark:ring-offset-gray-900"
                    onclick="handleLogin(event)"
                >
                    Login
                </button>
            </form>
        </div>
    </div>

function handleLogin(event) {
            event.preventDefault();
            
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;

// Basic validation
            if (!email || !password) {
                alert('Please fill in all fields');
                return;
            }

if (!isValidEmail(email)) {
                alert('Please enter a valid email address');
                return;
            }

// Here you would typically make an API call to your backend
            console.log('Login attempt:', { email, remember });
            alert('Login successful!');
        }

function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }

// Add ripple effect to button
        document.querySelector('button[type="submit"]').addEventListener('mousedown', function(e) {
            const button = e.currentTarget;
            const ripple = document.createElement('span');
            const rect = button.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size/2;
            const y = e.clientY - rect.top - size/2;
            
            ripple.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                top: ${y}px;
                left: ${x}px;
                background: rgba(255,255,255,0.3);
                border-radius: 50%;
                transform: scale(0);
                animation: ripple 0.6s linear;
                pointer-events: none;
            `;
            
            button.style.position = 'relative';
            button.style.overflow = 'hidden';
            button.appendChild(ripple);
            
            setTimeout(() => ripple.remove(), 600);
        });
    </script>

Related Examples

Sign in form
includes Google login button

Author:
Paul Intay

1 year ago

2k
Login page

Author:
Reuben Enahoro

4 months ago

904
Login form

Author:
Aman kumar

1 year ago

3.3k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

2 months ago

809
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

1 year ago

4.2k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

9 months ago

1.7k
Simple login page template

Author:
Freja Jensen

2 years ago

11.9k
Login form with social login buttons

Author:
Task Master

2 years ago

18k
Login

Author:
Amine Ghanim

4 weeks ago

238
Sign In form

Author:
Amit Pachange

2 years ago

11.3k
Login form responsive

Author:
Aman kumar

1 year ago

2.9k
Fullscreen login form with image backround

Author:
Rithik

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components