Sign-in and Forgot password
Ready to use Tailwind CSS sign-in and forgot password components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Sign-in pages and password reset forms aren't glamorous but they're one of the first things users interact with and a rough-looking one sets the wrong tone. We have a few clean layouts here: centered card on a plain or subtle background, split-screen with an image on one side, and a compact inline version. There's also a forgot password form to go alongside. They use @tailwindcss/forms for the inputs. Hook them up to your auth backend and you're done.
Tailwind
Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="flex min-h-[50rem] flex-col bg-white">
<div class="flex min-h-full flex-1 flex-col items-center justify-center px-6 py-12 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Login to your account</h2>
<p class="mt-3 text-base text-gray-600">Welcome back! Please enter your credentials.</p>
</div>
<div>
<form class="space-y-6" action="#">
<div class="space-y-5">
<div>
<label for="email" class="block select-none text-sm font-medium leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<label for="password" class="block select-none text-sm font-medium leading-6 text-gray-900">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="current-password" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="remember-me" class="select-none text-sm text-gray-900">Remember me</label>
</div>
<div>
<a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
</div>
</form>
</div>
<div>
<p class="text-center text-sm text-gray-500">
Don't have an account?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
</p>
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="flex min-h-[50rem] flex-col bg-gray-900">
<div class="flex min-h-full flex-1 flex-col items-center justify-center px-6 py-12 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-white sm:text-3xl">Login to your account</h2>
<p class="mt-3 text-base text-gray-300">Welcome back! Please enter your credentials.</p>
</div>
<div>
<form class="space-y-6" action="#">
<div class="space-y-5">
<div>
<label for="email" class="block select-none text-sm font-medium leading-6 text-white">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<label for="password" class="block select-none text-sm font-medium leading-6 text-white">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="current-password" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-600 bg-gray-900 text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-600 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:bg-gray-800 disabled:checked:border-gray-600 disabled:checked:bg-gray-800 disabled:indeterminate:border-gray-600 disabled:indeterminate:bg-gray-800" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-600" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="remember-me" class="select-none text-sm text-white">Remember me</label>
</div>
<div>
<a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
</div>
</form>
</div>
<div>
<p class="text-center text-sm text-gray-400">
Don't have an account?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
</p>
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="flex min-h-[50rem] flex-col bg-white">
<div class="flex min-h-full flex-1 flex-col items-center justify-center px-6 py-12 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-8 text-2xl font-semibold text-gray-900 sm:mt-16 sm:text-3xl">Login to your account</h2>
<p class="mt-3 text-base text-gray-600">Welcome back! Please enter your credentials.</p>
</div>
<div>
<form class="space-y-6" action="#">
<div class="rounded-md shadow-sm">
<div>
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" class="relative w-full rounded-t-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div class="-mt-px">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" placeholder="Password" autocomplete="current-password" class="relative w-full rounded-b-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="remember-me" class="select-none text-sm text-gray-900">Remember me</label>
</div>
<div>
<a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
</div>
</form>
</div>
<div>
<p class="text-center text-sm text-gray-500">
Don't have an account?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
</p>
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="flex min-h-[56rem] flex-col bg-white">
<div class="flex min-h-full w-full flex-1">
<div class="flex flex-1 flex-col items-center justify-center px-6 py-12 lg:w-1/2 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Login to your account</h2>
<p class="mt-3 text-base text-gray-600">Welcome back! Please enter your credentials.</p>
</div>
<div class="space-y-6">
<form class="space-y-6" action="#">
<div class="space-y-5">
<div>
<label for="email" class="block select-none text-sm font-medium leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<label for="password" class="block select-none text-sm font-medium leading-6 text-gray-900">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="current-password" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="remember-me" class="select-none text-sm text-gray-900">Remember me</label>
</div>
<div>
<a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
</div>
</form>
<div class="space-y-6">
<div class="relative isolate">
<div aria-hidden="true" class="absolute inset-x-0 top-1/2 -z-10 h-px w-full -translate-y-1/2 bg-gray-200"></div>
<div class="flex justify-center">
<span class="bg-white px-2 text-sm font-medium text-gray-600">Or continue with</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="flex items-center justify-center gap-x-3 rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">
<svg aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path 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" fill="#4285F4" />
<path 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" fill="#34A853" />
<path 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" fill="#FBBC05" />
<path 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" fill="#EA4335" />
<path d="M1 1h22v22H1z" fill="none" />
</svg>
<span>Google</span>
</a>
<a href="#" class="flex items-center justify-center gap-x-3 rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">
<svg aria-hidden="true" class="size-5" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23" />
</svg>
<span>GitHub</span>
</a>
</div>
</div>
</div>
<div>
<p class="text-center text-sm text-gray-500">
Don't have an account?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
</p>
</div>
</div>
</div>
<div class="relative hidden bg-gray-100 lg:block lg:w-1/2">
<img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1531934788018-04c3cd417b80?auto=format&fit=crop&w=1920&q=80" alt="" />
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="flex min-h-[56rem] flex-col overflow-hidden bg-white">
<div class="flex min-h-full w-full flex-1">
<div class="flex grow flex-col items-center justify-center px-6 py-12 lg:grow-0 lg:px-20 xl:w-1/2">
<div class="w-full max-w-sm space-y-8 lg:w-96">
<div class="text-start">
<img class="h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Login to your account</h2>
<p class="mt-3 text-base text-gray-600">Welcome back! Please enter your credentials.</p>
</div>
<div class="space-y-6">
<form class="space-y-6" action="#">
<div class="space-y-5">
<div>
<label for="email" class="block select-none text-sm font-medium leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<label for="password" class="block select-none text-sm font-medium leading-6 text-gray-900">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="current-password" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="remember-me" class="select-none text-sm text-gray-900">Remember me</label>
</div>
<div>
<a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
<a href="#" class="mt-4 flex items-center justify-center gap-x-3 rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">
<svg aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path 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" fill="#4285F4" />
<path 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" fill="#34A853" />
<path 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" fill="#FBBC05" />
<path 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" fill="#EA4335" />
<path d="M1 1h22v22H1z" fill="none" />
</svg>
<span>Sign in with Google</span>
</a>
</div>
</form>
</div>
<div>
<p class="text-center text-sm text-gray-500">
Don't have an account?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
</p>
</div>
</div>
</div>
<div class="relative hidden bg-gray-50 py-12 lg:flex lg:min-h-full lg:flex-1 lg:flex-col lg:items-start lg:justify-center lg:px-24 xl:w-1/2">
<div class="-m-0 h-[42rem] rounded-3xl bg-gray-100 p-2 shadow-lg ring-1 ring-inset ring-gray-900/10">
<img width="1920" height="1139" class="h-full w-auto max-w-none rounded-2xl bg-gray-900/10 ring-1 ring-gray-900/10" src="https://htmlwind.com/assets/images/dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="flex min-h-[50rem] flex-col bg-white sm:bg-gray-50">
<div class="flex min-h-full flex-1 flex-col items-center justify-center px-6 py-12 lg:px-8">
<div class="w-full max-w-md space-y-8 sm:rounded-xl sm:bg-white sm:px-10 sm:py-8 sm:shadow">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Login to your account</h2>
<p class="mt-3 text-base text-gray-600">Welcome back! Please enter your credentials.</p>
</div>
<div class="space-y-6">
<form class="space-y-6" action="#">
<div class="space-y-5">
<div>
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" placeholder="Password" autocomplete="current-password" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="remember-me" class="select-none text-sm text-gray-900">Remember me</label>
</div>
<div>
<a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
</div>
</form>
<div class="space-y-6">
<div class="relative isolate">
<div aria-hidden="true" class="absolute inset-x-0 top-1/2 -z-10 h-px w-full -translate-y-1/2 bg-gray-200"></div>
<div class="flex justify-center">
<span class="bg-white px-2 text-sm font-medium text-gray-600">Or continue with</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="flex items-center justify-center gap-x-3 rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">
<svg aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path 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" fill="#4285F4"></path>
<path 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" fill="#34A853"></path>
<path 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" fill="#FBBC05"></path>
<path 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" fill="#EA4335"></path>
<path d="M1 1h22v22H1z" fill="none"></path>
</svg>
<span>Google</span>
</a>
<a href="#" class="flex items-center justify-center gap-x-3 rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">
<svg aria-hidden="true" class="size-5" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"></path>
</svg>
<span>GitHub</span>
</a>
</div>
</div>
</div>
<div>
<p class="text-center text-sm text-gray-500">
Don't have an account?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
</p>
</div>
</div>
</div>
</div><div class="min-h-[50rem] bg-white">
<div class="flex flex-col items-center justify-center px-6 py-12 sm:py-24 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Forgot password?</h2>
<p class="mt-3 text-base text-gray-600">Enter your email and we'll send an email with instructions to reset your password.</p>
</div>
<div>
<form class="space-y-6" action="#">
<div>
<label for="email" class="block select-none text-sm font-medium leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Reset password</button>
</div>
</form>
</div>
<div class="flex justify-center">
<a href="#" class="inline-flex items-center gap-x-1.5 text-center text-sm font-semibold text-gray-600 hover:text-gray-800">
<svg aria-hidden="true" class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 10C16 9.58579 15.6642 9.25 15.25 9.25H4.75C4.33579 9.25 4 9.58579 4 10C4 10.4142 4.33579 10.75 4.75 10.75H15.25C15.6642 10.75 16 10.4142 16 10Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5303 4.21967C10.2374 3.92678 9.76256 3.92678 9.46967 4.21967L4.21967 9.46967C3.92678 9.76256 3.92678 10.2374 4.21967 10.5303C4.51256 10.8232 4.98744 10.8232 5.28033 10.5303L10.5303 5.28033C10.8232 4.98744 10.8232 4.51256 10.5303 4.21967Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21967 9.46967C3.92678 9.76256 3.92678 10.2374 4.21967 10.5303L9.46967 15.7803C9.76256 16.0732 10.2374 16.0732 10.5303 15.7803C10.8232 15.4874 10.8232 15.0126 10.5303 14.7197L5.28033 9.46967C4.98744 9.17678 4.51256 9.17678 4.21967 9.46967Z" fill="currentColor" />
</svg>
<span>Back to log in</span>
</a>
</div>
</div>
</div>
</div><div class="min-h-[50rem] bg-white">
<div class="flex flex-col items-center justify-center px-6 py-12 sm:py-24 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Set new password</h2>
<p class="mt-3 text-base text-gray-600">Ensure that your new password is different from the previously used passwords.</p>
</div>
<div>
<form class="space-y-6" action="#">
<div class="space-y-5">
<div>
<label for="password" class="block select-none text-sm font-medium leading-6 text-gray-900">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your new password" autocomplete="new-password" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
<div>
<label for="confirm-password" class="block select-none text-sm font-medium leading-6 text-gray-900">Confirm password</label>
<input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm new password" autocomplete="new-password" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
</div>
</div>
<div>
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Reset password</button>
</div>
</form>
</div>
<div class="flex justify-center">
<a href="#" class="inline-flex items-center gap-x-1.5 text-center text-sm font-semibold text-gray-600 hover:text-gray-800">
<svg aria-hidden="true" class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 10C16 9.58579 15.6642 9.25 15.25 9.25H4.75C4.33579 9.25 4 9.58579 4 10C4 10.4142 4.33579 10.75 4.75 10.75H15.25C15.6642 10.75 16 10.4142 16 10Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5303 4.21967C10.2374 3.92678 9.76256 3.92678 9.46967 4.21967L4.21967 9.46967C3.92678 9.76256 3.92678 10.2374 4.21967 10.5303C4.51256 10.8232 4.98744 10.8232 5.28033 10.5303L10.5303 5.28033C10.8232 4.98744 10.8232 4.51256 10.5303 4.21967Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21967 9.46967C3.92678 9.76256 3.92678 10.2374 4.21967 10.5303L9.46967 15.7803C9.76256 16.0732 10.2374 16.0732 10.5303 15.7803C10.8232 15.4874 10.8232 15.0126 10.5303 14.7197L5.28033 9.46967C4.98744 9.17678 4.51256 9.17678 4.21967 9.46967Z" fill="currentColor" />
</svg>
<span>Back to log in</span>
</a>
</div>
</div>
</div>
</div><div class="min-h-[50rem] bg-white">
<div class="flex flex-col items-center justify-center px-6 py-12 sm:py-24 lg:px-8">
<div class="w-full max-w-sm space-y-8">
<div class="text-center">
<img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
<h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Password reset</h2>
<p class="mt-3 text-base text-gray-600">Your password has been changed successfully. Click below to log in automatically.</p>
</div>
<div>
<a href="#" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Continue</a>
</div>
<div class="flex justify-center">
<a href="#" class="inline-flex items-center gap-x-1.5 text-center text-sm font-semibold text-gray-600 hover:text-gray-800">
<svg aria-hidden="true" class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 10C16 9.58579 15.6642 9.25 15.25 9.25H4.75C4.33579 9.25 4 9.58579 4 10C4 10.4142 4.33579 10.75 4.75 10.75H15.25C15.6642 10.75 16 10.4142 16 10Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5303 4.21967C10.2374 3.92678 9.76256 3.92678 9.46967 4.21967L4.21967 9.46967C3.92678 9.76256 3.92678 10.2374 4.21967 10.5303C4.51256 10.8232 4.98744 10.8232 5.28033 10.5303L10.5303 5.28033C10.8232 4.98744 10.8232 4.51256 10.5303 4.21967Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21967 9.46967C3.92678 9.76256 3.92678 10.2374 4.21967 10.5303L9.46967 15.7803C9.76256 16.0732 10.2374 16.0732 10.5303 15.7803C10.8232 15.4874 10.8232 15.0126 10.5303 14.7197L5.28033 9.46967C4.98744 9.17678 4.51256 9.17678 4.21967 9.46967Z" fill="currentColor" />
</svg>
<span>Back to log in</span>
</a>
</div>
</div>
</div>
</div>Frequently asked questions
-
Centered card form on plain background, split-screen with image or color panel, compact inline version, and matching forgot password form layouts.
-
No, they're just the HTML form UI. You hook them up to your backend, Laravel Auth, NextAuth, Supabase, whatever. The forms are styled and ready; the logic is on you.
-
Yes. The input fields use @tailwindcss/forms. Without it the inputs fall back to browser defaults which look pretty rough.
-
Yes. A couple of the layouts have a "Continue with Google" style button section already. You can add or modify these to match whatever providers you support.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.