Home
Aman kumar
Authentication

Authentication

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

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

Author Aman kumar

688

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-8">
    <div class="text-center">
      <div class="mt-5 space-y-2">
        <h3 class="text-gray-800 text-2xl font-bold sm:text-3xl">
          Log in to your account
        </h3>
        <p class="">
          Don't have an account?
          <a
            href="javascript:void(0)"
            class="font-medium text-indigo-600 hover:text-indigo-500"
            >Sign up</a
          >
        </p>
      </div>
    </div>
    <form @submit.prevent>
      <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-indigo-600 shadow-sm rounded-lg"
        />
      </div>
      <button
        class="w-full mt-4 px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
      >
        Sign in
      </button>
    </form>
    <div class="relative">
      <span class="block w-full h-px bg-gray-300"></span>
      <p
        class="inline-block w-fit text-sm bg-white px-2 absolute -top-2 inset-x-0 mx-auto"
      >
        Or continue with
      </p>
    </div>
    <div class="space-y-4 text-sm font-medium">
      
      <button
        class="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg 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>
      
      <button
        class="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg hover:bg-gray-50 duration-150 active:bg-gray-100"
      >
        
        <img
          src="https://raw.githubusercontent.com/sidiDev/remote-assets/f7119b9bdd8c58864383802fb92c7fc3a25c0646/twitter-icon.svg"
          alt="Twitter"
          class="w-5 h-5"
        />
        
        Continue with Twitter
      </button>
      
      <button
        class="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg hover:bg-gray-50 duration-150 active:bg-gray-100"
      >
        
        <img
          src="https://raw.githubusercontent.com/sidiDev/remote-assets/0d3b55a09c6bb8155ca19f43283dc6d88ff88bf5/github-icon.svg"
          alt="Github"
          class="w-5 h-5"
        />
        
        Continue with Github
      </button>
    </div>
    <div class="text-center">
      <a
        href="javascript:void(0)"
        class="text-indigo-600 hover:text-indigo-500"
        >Forgot password?</a
      >
    </div>
  </div>
</main>

Related Examples

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

7k
Login form
login form with sign in with Google button

Author:
gmer33

2 years ago

22.6k
Neon login Form #3
Login form neon design.

Author:
QQ-VVN

4 months ago

365
Form
form

Author:
Aman kumar

1 year ago

1.7k
Loginform
Animated Login Form with Google Sign-In (Tailwind CSS)

Author:
ishimwe prince

4 months ago

367
Auth Page with TailwindCSS and AlpineJS

Author:
ariaw

6 months ago

463
Login Form - Agendamiento

Author:
Jhonatan Llamuca

8 months ago

1.2k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

6 months ago

493
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

4 months ago

691
Login form

Author:
Leon Bachmann

2 years ago

13k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

8 months ago

1.5k
Responsive login form with image

Author:
Lukas Müller

2 years ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components