Home
Htmlwind
Sign-in form - Htmlwind

Sign-in form - Htmlwind

Simple login form

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Htmlwind

419

Fork Fullscreen

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

Related Examples