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.

Welcome Back

Sign in to access your account

Or continue with

Don't have an account?Sign up

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>
10

Login with Social Media

Incorporates social media buttons for seamless login via popular platforms.

Login

OR

Don't have an account?Sign up

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.

Login Visual

Welcome Back

Sign in to access your dashboard

Account Login

Enter your credentials to continue

Or continue with

Don't have an account?Sign up

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.

Sign in to your account

Access your dashboard and more

Or with email

Don't have an account? Sign up

or continue as guest

SSL Secure
Encrypted
GDPR Compliant
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>