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

223

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

Sign up Form - Page

Author:
ABDO-SY

5 months ago

825
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

5 months ago

707
Login

Author:
Amine Ghanim

4 months ago

1.4k
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:
Abhiraj

6 months ago

1.3k
Register form

Author:
Maxim

7 months ago

1.1k
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

5 months ago

1.1k
Simple login form

Author:
Freja Jensen

2 years ago

10.6k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

2 months ago

119
Elegant Login Form Design for Your Platform
A professionally designed and responsive login form built with TailwindCSS. Featuring a sleek layout with a gradient button, modern input fields, and user-friendly interactions, it’s perfect for any e-commerce, SaaS, or online platform. Includes options for "Forgot Password" and "Remember Me" functionality, providing a seamless user experience.

Author:
SHARIFUL ISLAM

6 months ago

800
Login form #2
Login form design

Author:
QQ-VVN

3 months ago

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

Author:
Akram Khan

1 year ago

1.8k
Responsive login form with image

Author:
Anonymous

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components