Login and Registration
Login with Dark Background
<main class="min-h-screen flex flex-col items-center justify-center bg-gray-800 space-y-10 py-12 px-4 sm:px-6 lg:px-8">
<div>
<h1 class="mt-6 text-center text-3xl font-extrabold text-gray-100">Sign in to your account</h1>
<p class="mt-2 text-center text-sm text-gray-200">
Or
<a href="#" class="font-medium text-indigo-300 border-b border-indigo-600"> register your FREE account </a>
</p>
</div>
<div class="max-w-md w-full mx-auto bg-white shadow rounded-lg p-7 space-y-6">
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="email">Email Address</label>
<input class="border rounded-md bg-white px-3 py-2" type="text" name="email" id="email" placeholder="Enter your Email Address" />
</div>
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="password">Password</label>
<input class="border rounded-md bg-white px-3 py-2" type="password" name="password" id="password" placeholder="Enter your Password" />
</div>
<div class="flex justify-between text-sm">
<div class="flex items-center space-x-2">
<input class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" type="checkbox" name="remember" id="remember" />
<label for="remember">Remember me</label>
</div>
<div>
<a class="text-indigo-600">Forgot your Password?</a>
</div>
</div>
<div>
<button class="w-full bg-indigo-600 text-white rounded-md p-2">Sign in</button>
</div>
<div class="relative pb-2">
<div class="absolute top-0 left-0 w-full border-b"></div>
<div class="absolute -top-3 left-0 w-full text-center">
<span class="bg-white px-3 text-sm">or continue via</span>
</div>
</div>
<div class="grid grid-cols-3 gap-3 text-xl">
<div class="border-2 rounded-md p-3 cursor-pointer hover:border-gray-600">
<img class="mx-auto" src="https://img.icons8.com/material-rounded/24/000000/twitter.png"/>
</div>
<div class="border-2 rounded-md p-3 cursor-pointer hover:border-gray-600">
<img class="mx-auto" src="https://img.icons8.com/material-rounded/24/000000/facebook.png"/>
</div>
<div class="border-2 rounded-md p-3 cursor-pointer hover:border-gray-600">
<img class="mx-auto" src="https://img.icons8.com/material-rounded/24/000000/linkedin--v2.png"/>
</div>
</div>
</div>
</main>
Register with Image
<main class="flex w-full">
<div class="flex-1 max-h-screen hidden md:block">
<img class="object-cover h-full w-full"
src="https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
alt="background">
</div>
<div class="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 p-10 min-h-screen flex flex-col justify-center">
<div class="mb-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-indigo-600" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z"
clip-rule="evenodd" />
</svg>
<h1 class="mt-10 text-5xl font-extrabold">Register</h1>
</div>
<div class="w-full mx-auto space-y-6">
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="email">Email Address</label>
<input type="text" name="email" id="email"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="jonn@doe.com">
</div>
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="password">Password</label>
<input type="password" name="password" id="password"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="******">
</div>
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="confirm_password">Confirm Password</label>
<input type="password" name="confirm_password" id="confirm_password"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="******">
</div>
<div>
<button class="w-full bg-indigo-600 text-white rounded-md p-2">Sign Up</button>
</div>
<div class="relative pb-2">
<div class="absolute top-0 left-0 w-full border-b"></div>
<div class="absolute -top-3 left-0 w-full text-center">
<span class="bg-white px-3 text-sm">or</span>
</div>
</div>
<div class="text-center w-full">
<a href="#" class="font-medium text-indigo-600 border-b border-indigo-600 text-sm">
Login to your existing account
</a>
</div>
</div>
</div>
</main>Login with Image
<main class="flex w-full">
<div class="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 p-10 min-h-screen flex flex-col justify-center">
<div class="mb-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-indigo-600" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z"
clip-rule="evenodd" />
</svg>
<h1 class="mt-10 text-5xl font-extrabold">Login</h1>
</div>
<div class="w-full mx-auto space-y-6">
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="email">Email Address</label>
<input type="text" name="email" id="email"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="jonn@doe.com">
</div>
<div class="flex flex-col">
<label class="text-sm font-bold text-gray-600 mb-1" for="password">Password</label>
<input type="password" name="password" id="password"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="******">
</div>
<div class="flex justify-between text-sm">
<div class="flex items-center space-x-2">
<input class="h-4 w-4 text-indigo-600 border-gray-300 rounded" type="checkbox" name="remember"
id="remember" />
<label for="remember">Remember me</label>
</div>
<div>
<a href="#" class="text-indigo-600">Forgot your Password?</a>
</div>
</div>
<div>
<button class="w-full bg-indigo-600 text-white rounded-md p-2">Sign in</button>
</div>
<div class="relative pb-2">
<div class="absolute top-0 left-0 w-full border-b"></div>
<div class="absolute -top-3 left-0 w-full text-center">
<span class="bg-white px-3 text-sm">or</span>
</div>
</div>
<div class="text-center w-full">
<a href="#" class="font-medium text-indigo-600 border-b border-indigo-600 text-sm">
Register your Free Account
</a>
</div>
</div>
</div>
<div class="flex-1 max-h-screen hidden md:block">
<img class="object-cover h-full w-full"
src="https://images.unsplash.com/photo-1583225128847-da05deb51dd1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
alt="background">
</div>
</main>