Login

This tailwind example is contributed by Aman kumar, on 30-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Aman kumar

299

Fork Fullscreen

<main
  class="w-full h-screen flex flex-col items-center justify-center px-4"
>
  <div class="max-w-sm w-full text-gray-600 space-y-5">
    <div class="text-center pb-8">
      <img src="https://ossimg.cmdgametransit.com/OK.Win/other/h5setting_20240313155706n3d7.png" width="150" class="mx-auto" />
      <div class="mt-5">
        <h3 class="text-gray-800 text-2xl font-bold sm:text-3xl">
          Log in to your account
        </h3>
      </div>
    </div>
    <form onSubmit="event.preventDefault()" class="space-y-5">
      <div>
        <label class="font-medium"> Email </label>
        <input
          type="email"
          required
          class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-red-600 shadow-sm rounded-lg"
        />
      </div>
      <div>
        <label class="font-medium"> Password </label>
        <input
          type="password"
          required
          class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-red-600 shadow-sm rounded-lg"
        />
      </div>
      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center gap-x-3">
          <input
            type="checkbox"
            id="remember-me-checkbox"
            class="checkbox-item peer hidden"
          />
          <label
            for="remember-me-checkbox"
            class="relative flex w-5 h-5 bg-white peer-checked:bg-red-600 rounded-md border ring-offset-2 ring-red-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45"
          ></label>
          <span>Remember me</span>
        </div>
        <a
          href="javascript:void(0)"
          class="text-center text-red-600 hover:text-red-500"
          >Forgot password?</a
        >
      </div>
      <button
        class="w-full px-4 py-2 text-white font-medium bg-red-600 hover:bg-red-500 active:bg-red-600 rounded-lg duration-150"
      >
        Sign in
      </button>
    </form>
    <button
      class="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg text-sm font-medium hover:bg-gray-50 duration-150 active:bg-gray-100"
    >
      
      <img
        src="https://raw.githubusercontent.com/sidiDev/remote-assets/7cd06bf1d8859c578c2efbfda2c68bd6bedc66d8/google-icon.svg"
        alt="Google"
        class="w-5 h-5"
      />
      
      Continue with Google
    </button>
    <p class="text-center">
      Don't have an account?
      <a
        href="javascript:void(0)"
        class="font-medium text-red-600 hover:text-red-500"
        >Sign up</a
      >
    </p>
  </div>
</main>

Related Examples

login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Author:
Nishimwe Jeanine

3 months ago

360
Quick Signup Form

Author:
Paul Intay

1 year ago

2.5k
cards
html , css ,

Author:
Hacker Development

4 months ago

486
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

10 months ago

1.7k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

7 months ago

2.1k
login from

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

1.2k
Responsive login form with image

Author:
Lukas Müller

2 years ago

14.7k
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

2 months ago

113
Authentication
Tailwind CSS Authentication Beautifully designed, fully responsive, expertly crafted authentication examples

Author:
Aman kumar

5 months ago

397
Login Form - Agendamiento

Author:
Jhonatan Llamuca

8 months ago

1.2k
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:
Anonymous

1 year ago

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

Author:
Anja Müller

1 year ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components