Login Components
Beautiful, responsive login form components built with TailwindCSS. Perfect for authentication pages, user sign-in, and secure access forms.
1. Basic Login Form
A simple, clean login form with email and password fields.
Login
<div class="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<h3 class="text-xl font-bold mb-4">Login</h3>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input id="email" type="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input id="password" type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-md font-semibold hover:bg-purple-600/80 transition-colors">
Sign In
</button>
</form>
</div><template>
<div class="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<h3 class="text-xl font-bold mb-4">Login</h3>
<form @submit.prevent="handleLogin">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input v-model="email" id="email" type="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input v-model="password" id="password" type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-md font-semibold hover:bg-purple-600/80 transition-colors">
Sign In
</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
const email = ref('');
const password = ref('');
const handleLogin = () => {
console.log('Logging in with:', email.value, password.value);
};
</script>import React, { useState } from 'react';
export default function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log('Logging in with:', email, password);
};
return (
<div className="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<h3 className="text-xl font-bold mb-4">Login</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
/>
</div>
<button type="submit" className="w-full bg-purple-600 text-white py-2 rounded-md font-semibold hover:bg-purple-600/80 transition-colors">
Sign In
</button>
</form>
</div>
);
}2. Login Form with Social login
Login form with remember me, forgot password, and social login options.
Login
Or continue with
<div class="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<h3 class="text-xl font-bold mb-4">Login</h3>
<form>
<div class="mb-4">
<label for="email2" class="block text-sm font-medium text-gray-700">Email</label>
<input id="email2" type="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div class="mb-4">
<label for="password2" class="block text-sm font-medium text-gray-700">Password</label>
<input id="password2" type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input id="remember" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="remember" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-md font-semibold hover:bg-purple-600/80 transition-colors">Sign In</button>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span class="ml-2">Google</span>
</button>
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
<span class="ml-2">Twitter</span>
</button>
</div>
</div>
</div><template>
<div class="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<h3 class="text-xl font-bold mb-4">Login</h3>
<form @submit.prevent="handleLogin">
<div class="mb-4">
<label for="email2" class="block text-sm font-medium text-gray-700">Email</label>
<input v-model="email" id="email2" type="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div class="mb-4">
<label for="password2" class="block text-sm font-medium text-gray-700">Password</label>
<input v-model="password" id="password2" type="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm">
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input v-model="remember" id="remember" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="remember" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-md font-semibold hover:bg-purple-600/80 transition-colors">Sign In</button>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<button @click="loginWithGoogle" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span class="ml-2">Google</span>
</button>
<button @click="loginWithTwitter" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
<span class="ml-2">Twitter</span>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const email = ref('');
const password = ref('');
const remember = ref(false);
const handleLogin = () => {
console.log('Logging in with:', email.value, password.value, remember.value);
};
const loginWithGoogle = () => {
console.log('Login with Google');
};
const loginWithTwitter = () => {
console.log('Login with Twitter');
};
</script>import React, { useState } from 'react';
export default function AdvancedLoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [remember, setRemember] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Logging in with:', email, password, remember);
};
const loginWithGoogle = () => {
console.log('Login with Google');
};
const loginWithTwitter = () => {
console.log('Login with Twitter');
};
return (
<div className="w-full max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow-sm p-6">
<h3 className="text-xl font-bold mb-4">Login</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="email2" className="block text-sm font-medium text-gray-700">Email</label>
<input
id="email2"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
/>
</div>
<div className="mb-4">
<label htmlFor="password2" className="block text-sm font-medium text-gray-700">Password</label>
<input
id="password2"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm px-3 py-2 focus:ring-purple-500 focus:border-purple-500 sm:text-sm"
/>
</div>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center">
<input
id="remember"
type="checkbox"
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
/>
<label htmlFor="remember" className="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" className="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" className="w-full bg-purple-600 text-white py-2 rounded-md font-semibold hover:bg-purple-600/80 transition-colors">Sign In</button>
</form>
<div className="mt-6">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-3">
<button onClick={loginWithGoogle} className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg className="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span className="ml-2">Google</span>
</button>
<button onClick={loginWithTwitter} className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
<span className="ml-2">Twitter</span>
</button>
</div>
</div>
</div>
);
}3. Dark Mode Login Form
A sleek dark-themed login form with modern styling and improved accessibility.
Login
Or continue with
<div class="w-full max-w-md mx-auto bg-gray-800 border border-gray-700 rounded-lg shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-white text-center">Login</h3>
<form>
<div class="mb-6">
<label for="email3" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
<input id="email3" type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="mb-6">
<label for="password3" class="block text-sm font-medium text-gray-300 mb-2">Password</label>
<input id="password3" type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input id="remember3" type="checkbox" class="h-4 w-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-offset-gray-800">
<label for="remember3" class="ml-2 block text-sm text-gray-300">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-400 hover:text-purple-300">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-semibold transition-colors">Sign In</button>
</form>
<div class="mt-8">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-800 text-gray-400">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<button class="w-full inline-flex justify-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition-colors">
<svg class="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span class="ml-2">Google</span>
</button>
<button class="w-full inline-flex justify-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
<span class="ml-2">Twitter</span>
</button>
</div>
</div>
</div><template>
<div class="w-full max-w-md mx-auto bg-gray-800 border border-gray-700 rounded-lg shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-white text-center">Login</h3>
<form @submit.prevent="handleLogin">
<div class="mb-6">
<label for="email3" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
<input v-model="email" id="email3" type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="mb-6">
<label for="password3" class="block text-sm font-medium text-gray-300 mb-2">Password</label>
<input v-model="password" id="password3" type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input v-model="remember" id="remember3" type="checkbox" class="h-4 w-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-offset-gray-800">
<label for="remember3" class="ml-2 block text-sm text-gray-300">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-400 hover:text-purple-300">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-semibold transition-colors">Sign In</button>
</form>
<div class="mt-8">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-800 text-gray-400">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<button @click="loginWithGoogle" class="w-full inline-flex justify-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition-colors">
<svg class="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span class="ml-2">Google</span>
</button>
<button @click="loginWithTwitter" class="w-full inline-flex justify-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
<span class="ml-2">Twitter</span>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const email = ref('');
const password = ref('');
const remember = ref(false);
const handleLogin = () => {
console.log('Logging in with:', email.value, password.value, remember.value);
};
const loginWithGoogle = () => {
console.log('Login with Google');
};
const loginWithTwitter = () => {
console.log('Login with Twitter');
};
</script>import React, { useState } from 'react';
export default function DarkLoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [remember, setRemember] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Logging in with:', email, password, remember);
};
const loginWithGoogle = () => {
console.log('Login with Google');
};
const loginWithTwitter = () => {
console.log('Login with Twitter');
};
return (
<div className="w-full max-w-md mx-auto bg-gray-800 border border-gray-700 rounded-lg shadow-lg p-8">
<h3 className="text-2xl font-bold mb-6 text-white text-center">Login</h3>
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label htmlFor="email3" className="block text-sm font-medium text-gray-300 mb-2">Email</label>
<input
id="email3"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors"
/>
</div>
<div className="mb-6">
<label htmlFor="password3" className="block text-sm font-medium text-gray-300 mb-2">Password</label>
<input
id="password3"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors"
/>
</div>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center">
<input
id="remember3"
type="checkbox"
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
className="h-4 w-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-offset-gray-800"
/>
<label htmlFor="remember3" className="ml-2 block text-sm text-gray-300">Remember me</label>
</div>
<a href="#" className="text-sm text-purple-400 hover:text-purple-300">Forgot password?</a>
</div>
<button type="submit" className="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-semibold transition-colors">Sign In</button>
</form>
<div className="mt-8">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-600"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-gray-800 text-gray-400">Or continue with</span>
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-3">
<button onClick={loginWithGoogle} className="w-full inline-flex justify-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition-colors">
<svg className="w-5 h-5" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span className="ml-2">Google</span>
</button>
<button onClick={loginWithTwitter} className="w-full inline-flex justify-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
<span className="ml-2">Twitter</span>
</button>
</div>
</div>
</div>
);
}4. Split Screen Login Form
A modern split-screen login form with an image on the left and form on the right.
Welcome Back
Sign in to your account to continue
Login
<div class="w-full max-w-4xl mx-auto bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
<div class="flex min-h-[500px]">
<!-- Left Side - Image -->
<div class="w-1/2 bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center p-8">
<div class="text-center text-white">
<h2 class="text-3xl font-bold mb-4">Welcome Back</h2>
<p class="text-purple-100">Sign in to your account to continue</p>
</div>
</div>
<!-- Right Side - Form -->
<div class="w-1/2 p-8 flex items-center">
<div class="w-full max-w-md">
<h3 class="text-2xl font-bold mb-6 text-center">Login</h3>
<form>
<div class="mb-4">
<label for="email4" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input id="email4" type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="mb-4">
<label for="password4" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
<input id="password4" type="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input id="remember4" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="remember4" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-semibold transition-colors">Sign In</button>
</form>
</div>
</div>
</div>
</div><template>
<div class="w-full max-w-4xl mx-auto bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
<div class="flex min-h-[500px]">
<!-- Left Side - Image -->
<div class="w-1/2 bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center p-8">
<div class="text-center text-white">
<h2 class="text-3xl font-bold mb-4">Welcome Back</h2>
<p class="text-purple-100">Sign in to your account to continue</p>
</div>
</div>
<!-- Right Side - Form -->
<div class="w-1/2 p-8 flex items-center">
<div class="w-full max-w-md">
<h3 class="text-2xl font-bold mb-6 text-center">Login</h3>
<form @submit.prevent="handleLogin">
<div class="mb-4">
<label for="email4" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input v-model="email" id="email4" type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="mb-4">
<label for="password4" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
<input v-model="password" id="password4" type="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input v-model="remember" id="remember4" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="remember4" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" class="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-semibold transition-colors">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const email = ref('');
const password = ref('');
const remember = ref(false);
const handleLogin = () => {
console.log('Logging in with:', email.value, password.value, remember.value);
};
</script>import React, { useState } from 'react';
export default function SplitScreenLoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [remember, setRemember] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Logging in with:', email, password, remember);
};
return (
<div className="w-full max-w-4xl mx-auto bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
<div className="flex min-h-[500px]">
<!-- Left Side - Image -->
<div className="w-1/2 bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center p-8">
<div className="text-center text-white">
<h2 className="text-3xl font-bold mb-4">Welcome Back</h2>
<p className="text-purple-100">Sign in to your account to continue</p>
</div>
</div>
<!-- Right Side - Form -->
<div className="w-1/2 p-8 flex items-center">
<div className="w-full max-w-md">
<h3 className="text-2xl font-bold mb-6 text-center">Login</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="email4" className="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input
id="email4"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors"
/>
</div>
<div className="mb-4">
<label htmlFor="password4" className="block text-sm font-medium text-gray-700 mb-2">Password</label>
<input
id="password4"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 focus:outline-none transition-colors"
/>
</div>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center">
<input
id="remember4"
type="checkbox"
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
/>
<label htmlFor="remember4" className="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<a href="#" className="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
</div>
<button type="submit" className="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-semibold transition-colors">Sign In</button>
</form>
</div>
</div>
</div>
</div>
);
}5. Glassmorphism Login Form
A modern glassmorphism-style login form with backdrop blur effects.
Login
<div class="min-h-[400px] bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center">
<div class="w-full max-w-md bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl shadow-2xl p-8">
<h3 class="text-2xl font-bold mb-6 text-white text-center">Login</h3>
<form>
<div class="mb-6">
<label for="email5" class="block text-sm font-medium text-white mb-2">Email</label>
<input id="email5" type="email" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:ring-purple-300 focus:border-purple-300 focus:outline-none transition-colors backdrop-blur-sm">
</div>
<div class="mb-6">
<label for="password5" class="block text-sm font-medium text-white mb-2">Password</label>
<input id="password5" type="password" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:ring-purple-300 focus:border-purple-300 focus:outline-none transition-colors backdrop-blur-sm">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input id="remember5" type="checkbox" class="h-4 w-4 text-purple-600 bg-white/10 border-white/20 rounded focus:ring-purple-300 focus:ring-offset-0">
<label for="remember5" class="ml-2 block text-sm text-white">Remember me</label>
</div>
<a href="#" class="text-sm text-white/80 hover:text-white">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-white/20 hover:bg-white/30 text-white py-3 rounded-lg font-semibold transition-colors backdrop-blur-sm border border-white/30">Sign In</button>
</form>
</div>
</div><template>
<div class="min-h-[400px] bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center">
<div class="w-full max-w-md bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl shadow-2xl p-8">
<h3 class="text-2xl font-bold mb-6 text-white text-center">Login</h3>
<form @submit.prevent="handleLogin">
<div class="mb-6">
<label for="email5" class="block text-sm font-medium text-white mb-2">Email</label>
<input v-model="email" id="email5" type="email" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:ring-purple-300 focus:border-purple-300 focus:outline-none transition-colors backdrop-blur-sm">
</div>
<div class="mb-6">
<label for="password5" class="block text-sm font-medium text-white mb-2">Password</label>
<input v-model="password" id="password5" type="password" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:ring-purple-300 focus:border-purple-300 focus:outline-none transition-colors backdrop-blur-sm">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input v-model="remember" id="remember5" type="checkbox" class="h-4 w-4 text-purple-600 bg-white/10 border-white/20 rounded focus:ring-purple-300 focus:ring-offset-0">
<label for="remember5" class="ml-2 block text-sm text-white">Remember me</label>
</div>
<a href="#" class="text-sm text-white/80 hover:text-white">Forgot password?</a>
</div>
<button type="submit" class="w-full bg-white/20 hover:bg-white/30 text-white py-3 rounded-lg font-semibold transition-colors backdrop-blur-sm border border-white/30">Sign In</button>
</form>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const email = ref('');
const password = ref('');
const remember = ref(false);
const handleLogin = () => {
console.log('Logging in with:', email.value, password.value, remember.value);
};
</script>import React, { useState } from 'react';
export default function GlassmorphismLoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [remember, setRemember] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
console.log('Logging in with:', email, password, remember);
};
return (
<div className="min-h-[400px] bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center">
<div className="w-full max-w-md bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl shadow-2xl p-8">
<h3 className="text-2xl font-bold mb-6 text-white text-center">Login</h3>
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label htmlFor="email5" className="block text-sm font-medium text-white mb-2">Email</label>
<input
id="email5"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:ring-purple-300 focus:border-purple-300 focus:outline-none transition-colors backdrop-blur-sm"
/>
</div>
<div className="mb-6">
<label htmlFor="password5" className="block text-sm font-medium text-white mb-2">Password</label>
<input
id="password5"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:ring-purple-300 focus:border-purple-300 focus:outline-none transition-colors backdrop-blur-sm"
/>
</div>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center">
<input
id="remember5"
type="checkbox"
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
className="h-4 w-4 text-purple-600 bg-white/10 border-white/20 rounded focus:ring-purple-300 focus:ring-offset-0"
/>
<label htmlFor="remember5" className="ml-2 block text-sm text-white">Remember me</label>
</div>
<a href="#" className="text-sm text-white/80 hover:text-white">Forgot password?</a>
</div>
<button type="submit" className="w-full bg-white/20 hover:bg-white/30 text-white py-3 rounded-lg font-semibold transition-colors backdrop-blur-sm border border-white/30">Sign In</button>
</form>
</div>
</div>
);
}