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

705

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

Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.3k
Welcome Back

Author:
Tanvir Islam

11 months ago

1.1k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

7 months ago

664
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

8k
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

22k
Login

Author:
Aman kumar

7 months ago

578
Login Form
Bigger input field Login form. like bootstrap input-lg

Author:
muhittin budak

9 months ago

585
Sample login form

Author:
Orestis Tsakiridis

1 year ago

1.3k
Modern Neo-Brutalist Login Page – Dark & Light Mode with Tailwind CSS
A bold and functional login interface inspired by Neo-Brutalist design, built with Tailwind CSS. Features crisp typography, high-contrast elements, and smooth interactive states. Fully responsive and ready to integrate into any modern web application.

Author:
Homayoun

4 weeks ago

272
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

2.4k
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

1 year ago

7.7k
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components