Login Form Component - Dark Mode Vibrant
A complex, responsive login form component designed for business/corporate use with a vibrant color scheme and full dark mode support, aiming to reduce eye strain.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-950 dark:bg-gray-950">
<div class="w-full max-w-md mx-auto rounded-3xl shadow-2xl p-8 transform transition-all duration-300 ease-in-out bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 border border-purple-700 dark:border-purple-800">
<div class="text-center mb-8">
<svg class="mx-auto h-12 w-auto text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h2 class="mt-4 text-3xl font-extrabold text-white tracking-tight leading-tight">Sign In to Your Account</h2>
<p class="mt-2 text-sm text-purple-200">Or <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">create a new account</a></p>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-purple-200 mb-1">Email Address</label>
<div class="relative">
<input id="email" name="email" type="email" autocomplete="email" required
class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
placeholder="[email protected]">
<span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
</span>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-purple-200 mb-1">Password</label>
<div class="relative">
<input id="password" name="password" type="password" autocomplete="current-password" required
class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
placeholder="********">
<span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6zM15 7V4a2 2 0 00-2-2H9a2 2 0 00-2 2v3m0 0H5h14m-9 4h3"></path></svg>
</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-5 w-5 text-purple-400 focus:ring-purple-300 border-purple-500 rounded bg-purple-700 dark:bg-purple-800 transition-colors duration-200 ease-in-out">
<label for="remember-me" class="ml-2 block text-sm text-purple-200">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
Sign In
</button>
</div>
</form>
<div class="mt-8 text-center">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-purple-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-3 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-purple-200">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<div>
<a href="#"
class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h-1.5V11.5h-.75V9.25H5.25V7h2V4.75h1.5V7h1.5V4.75h-.75c-.828 0-1.5.672-1.5 1.5v1.5h.75c.828 0 1.5-.672 1.5-1.5V5.5h-.75c-.828 0-1.5.672-1.5 1.5V9.25H8.25V7h-1.5V4.75h1.5V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5v2.25h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25z" />
</svg>
Google
</a>
</div>
<div>
<a href="#"
class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h1.5V11.5h.75V9.25H5.25V7h2.25V4.75H8V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5V11.5h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25zM12 10.5h-1.5V7H12v3.5zm-1.5-4h1.5V4.75H10.5V6.5z" />
</svg>
GitHub
</a>
</div>
</div>
</div>
</div>
</div>Related Components
Minimalist E-commerce Login Form
A minimalist and flat design login form with pastel colors, designed for e-commerce sites. It is simple, responsive, and supports dark mode using Tailwind CSS.
Neumorphism Login Form
A Login Form component designed with Neumorphism style, featuring responsive design and dark theme support using Tailwind CSS.
Login Form Component
Skeuomorphic Login Form for Social Media with Pastel Colors, Responsive, and Dark Mode Support. The form features a subtle 3D effect on inputs and buttons, mimicking physical elements. Shadows and gradients are used to enhance the skeuomorphic feel. Inputs have a soft inset shadow, and buttons have a raised, clickable appearance. The pastel color scheme transitions smoothly to a darker, muted version in dark mode, maintaining readability and visual comfort. Responsive design ensures usability across devices.