Login

Login

This tailwind example is contributed by Amine Ghanim, on 19-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Login Form

Author Amine Ghanim

131

Fork Fullscreen

<link
  rel="preload"
  as="image"
  href="https://res.cloudinary.com/dkt1t22qc/image/upload/v1742348949/Prestataires_Documents/smj7n1bdlpjsfsotwpco.png" />
<div
  class="bg-cover bg-gradient-to-br from-[#7337FF] via-[#000000] to-[#0C7EA8]"
  style="background-image:url(https://res.cloudinary.com/dkt1t22qc/image/upload/v1742348950/Prestataires_Documents/fopt5esl9cgvlcawz1z4.jpg)">
  <div class="h-screen flex justify-center items-center backdrop-brightness-50">
    <div class="flex flex-col items-center space-y-8">
      <div>
        <img
          src="https://res.cloudinary.com/dkt1t22qc/image/upload/v1742348949/Prestataires_Documents/smj7n1bdlpjsfsotwpco.png"
          alt="TyBot Logo"
          class="cursor-pointer" />
      </div>
      <div
        class="rounded-[20px] w-80 p-8 bg-[#310D84]"
        style="box-shadow:-6px 3px 20px 4px #0000007d">
        <h1 class="text-white text-3xl font-bold mb-4">Login</h1>
        <div class="space-y-4">
          <input
            type="text"
            placeholder="Email address"
            class="bg-[#8777BA] w-full p-2.5 rounded-md placeholder:text-gray-300 shadow-md shadow-blue-950" /><input
            type="text"
            placeholder="Password"
            class="bg-[#8777BA] w-full p-2.5 rounded-md placeholder:text-gray-300 shadow-md shadow-blue-950" />
        </div>
        <div class="mb-4">
          <span class="text-[#228CE0] text-[10px] ml-2 cursor-pointer"
            >Forget Password?</span
          >
        </div>
        <div class="flex justify-center mb-4">
          <button
            class="h-10 w-full cursor-pointer text-white rounded-md bg-gradient-to-br from-[#7336FF] to-[#3269FF] shadow-md shadow-blue-950">
            Sign In
          </button>
        </div>
        <div class="text-gray-300 text-center">
          Don&#x27;t have an account?<span
            class="text-[#228CE0] cursor-pointer">
            Sign up</span
          >
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Login page

Author:
Reuben Enahoro

4 months ago

904
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

20k
Login Form
Login Form

Author:
Md. Tofayel islam

7 months ago

1.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

1 week ago

32
Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.6k
Register form

Author:
Maxim

3 months ago

709
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

9 months ago

1.7k
Tailwind login page

Author:
Kofi Osei

2 years ago

10.5k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

3 months ago

542
Login form

Author:
Leon Bachmann

2 years ago

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

Author:
R Thapa

1 year ago

15.4k
Login Card

Author:
Anonymous

1 year ago

6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1