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

706

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

Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

1 year ago

2.7k
NDUSTRIALCORE login
NDUSTRIALCORE

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

547
Login Form simple
Login form design

Author:
QQ-VVN

8 months ago

656
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2.3k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

9 months ago

685
Quick Signup Form

Author:
Paul Intay

1 year ago

2.8k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

10 months ago

962
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

6 months ago

1.2k
login
login

Author:
Abhishek Kumar

4 months ago

731
Forgot password?
you can change password an time

Author:
gidy

7 months ago

563
Sign in / Login Form

Author:
Bunny

3 years ago

13.7k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

3 years ago

23.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components