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.1k

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 up form

Author:
Rajesh Maheshwari

6 days ago

43
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

15.1k
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

2 months ago

200
Login form with social login buttons

Author:
Task Master

2 years ago

17.4k
Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Author:
Shariar Hasan

1 year ago

2.3k
Sign In form

Author:
Amit Pachange

2 years ago

11.1k
Full page login page

Author:
Anonymous

4 months ago

1.1k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

4 months ago

1.1k
Sign In page CezeriLab

Author:
Sedat Kumcu

4 months ago

665
Login Form - Agendamiento

Author:
Jhonatan Llamuca

2 months ago

264
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

8 months ago

1.8k
Responsive login form with image

Author:
Lukas Müller

2 years ago

12.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components