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.
Simple
Preview
<!--
This component requires the @tailwindcss/forms plugin for form styling.
To install and set up, run `npm install -D @tailwindcss/forms` and add it to your tailwind.config.js file like so:
// tailwind.config.js
module.exports = {
//...
plugins: [
require('@tailwindcss/forms'),
// other plugins
],
};
-->
<div class="flex min-h-dvh 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>