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

1.1k

2

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

Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

5 months ago

878
chating
chating all social media

Author:
Nirere Esther

5 months ago

335
Login with google provider
Login with google provider

Author:
Aman kumar

6 months ago

947
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

1 year ago

2.9k
Login Form

Author:
UI-Templates

3 weeks ago

46
login
html , css

Author:
Hacker Development

5 months ago

383
Login form

Author:
Aman kumar

1 year ago

4.3k
Simple login form

Author:
Freja Jensen

2 years ago

10.6k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

5 months ago

611
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

42.8k
Simple login page template

Author:
Freja Jensen

2 years ago

12.3k
NDUSTRIALCORE login
NDUSTRIALCORE

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

430

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12