Sections
Tailwind CSS Login Forms - Madhuranjan UI
Explore our range of login form designs, from simple and clean layouts to advanced forms with social media integration. Each design is optimized for a seamless user experience.
Simple Login Form
A basic, straightforward login form designed for quick access.
Welcome Back
Not registered?Create an account
1<div class="flex items-center justify-center bg-gray-50 px-4 dark:bg-gray-900">
2 <div class="w-full max-w-sm rounded-md bg-white p-6 shadow dark:bg-gray-800">
3 <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 dark:text-white">Welcome Back</h2>
4 <form class="space-y-4">
5 <div>
6 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email/Username</label>
7 <input type="text" class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="Enter your email or username" />
8 </div>
9 <div>
10 <div class="flex items-center justify-between">Advanced Login Form
A feature-rich form offering additional security and enhanced validation.
1<div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-4 dark:from-gray-900 dark:to-gray-800">
2 <div class="w-full max-w-md overflow-hidden rounded-2xl bg-white p-8 shadow-xl dark:bg-gray-800">
3 <div class="mb-8 text-center">
4 <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-violet-600 dark:text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
5 <path stroke-linecap="round" stroke-linejoin="round" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
6 </svg>
7 <h2 class="mt-4 text-3xl font-bold text-gray-800 dark:text-white">Welcome Back</h2>
8 <p class="mt-2 text-gray-600 dark:text-gray-300">Sign in to access your account</p>
9 </div>
10Login with Social Media
Incorporates social media buttons for seamless login via popular platforms.
1<div class="flex min-h-screen items-center justify-center bg-gray-100 px-4 font-sans dark:bg-gray-950">
2 <div class="w-full max-w-md rounded-lg bg-white p-8 shadow-lg dark:bg-gray-800">
3 <h2 class="mb-6 text-center text-3xl font-bold text-gray-800 dark:text-white">Login</h2>
4 <form class="space-y-6">
5 <div><label for="emailOrUsername" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Email / Username</label> <input type="text" id="emailOrUsername" class="mt-1 block w-full rounded-lg border border-gray-300 p-2.5 transition duration-150 ease-in-out focus:border-transparent focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:focus:ring-blue-500" placeholder="[email protected]" /></div>
6 <div>
7 <div class="mb-1 flex items-center justify-between"><label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> <a href="#" class="text-sm text-violet-600 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Forgot password?</a></div>
8 <input type="password" id="password" class="mt-1 block w-full rounded-lg border border-gray-300 p-2.5 transition duration-150 ease-in-out focus:border-transparent focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:focus:ring-blue-500" placeholder="••••••••" />
9 </div>
10 <div class="flex items-center">Login Page with Image
A stylish login page enhanced with an impactful image.
1<div class="flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4 dark:from-gray-900 dark:to-gray-800">
2 <div class="w-full overflow-hidden rounded-xl bg-white shadow-xl dark:bg-gray-800">
3 <div class="flex flex-col md:flex-row">
4 <div class="relative md:w-1/2">
5 <img src="/template/loginImage.png" alt="Login Visual" class="h-full w-full object-cover" />
6 <div class="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 to-transparent p-6">
7 <div>
8 <h3 class="text-2xl font-bold text-white">Welcome Back</h3>
9 <p class="mt-1 text-gray-200">Sign in to access your dashboard</p>
10 </div>Most Advanced Login Form
Our most sophisticated login design, packed with features for an optimal experience.
1 <div class="flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4 dark:from-gray-900 dark:to-gray-800">
2 <div class="w-full max-w-4xl overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-gray-800">
3 <div class="flex flex-col lg:flex-row">
4 <div class="relative hidden lg:block lg:w-1/2">
5 <img src="/template/loginImage.png" alt="Login Visual" class="h-full w-full object-cover" />
6 <div class="absolute inset-0 flex flex-col justify-between bg-gradient-to-t from-black/70 via-transparent to-transparent p-8">
7 <div>
8 <div class="flex items-center">
9 <svg class="h-8 w-8 text-white" fill="currentColor" viewBox="0 0 24 24">
10 <path d="M12..."></path>