Login

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

Login Form

Author Amine Ghanim

Tailwind v3.4 2k 3

Fork Fullscreen

<link rel="preload" as="image" href="https://res.cloudinary.com/dkt1t22qc/image/upload/v1742357451/Prestataires_Documents/cynbxx4vxvgv2wrpakiq.jpg" />
<div class="bg-cover bg-center"
  style="background-image:url(https://res.cloudinary.com/dkt1t22qc/image/upload/v1742357451/Prestataires_Documents/cynbxx4vxvgv2wrpakiq.jpg)">
  <div class="flex h-screen items-center justify-center">
    <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="w-80 rounded-[20px] bg-white p-8" style="box-shadow:#00000057 1px 3px 4px">
        <h1 class="mb-4 text-center text-3xl font-bold text-black" style="text-shadow:#00000063 0px 3px 5px">
          Welcome Back !
        </h1>
        <div class="space-y-4">
          <input
            type="text"
            placeholder="Email address"
            class="w-full rounded-md bg-[#E9EFF6] p-2.5 placeholder:text-[#000000]"
            style="box-shadow:rgb(0 0 0 / 21%) 0px 7px 5px 0px" /><input
            type="text"
            placeholder="Password"
            class="w-full rounded-md bg-[#E9EFF6] p-2.5 placeholder:text-[#000000]"
            style="box-shadow:rgb(0 0 0 / 21%) 0px 7px 5px 0px" />
        </div>
        <div class="mb-4 pt-2">
          <span
            class="ml-2 cursor-pointer text-[10px] text-[#228CE0] hover:underline"
            >Forget Password?</span>
        </div>
        <div class="mb-4 flex justify-center">
          <button
            class="h-10 w-full cursor-pointer rounded-md bg-gradient-to-br from-[#7336FF] to-[#3269FF] text-white shadow-md shadow-blue-950">
            Sign In
          </button>
        </div>
        <div class="text-center text-[#969696]">
          Don&#x27;t have an account?
          <span class="cursor-pointer text-[#7337FF] hover:underline"
            >Sign up</span>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

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

Aman kumar

1 year ago

1.9k
Simple Sign up form
A responsive simple singup or login form

Emdadul Islam

2 years ago

3k
Quick Signup Form

Paul Intay

2 years ago

3k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
Dark Glassmorphism Login Form
A modern dark login interface with frosted-glass styling, ambient aurora glows, translucent input fields, and vibrant gradient accents.

JUGENDRA GANGWAR

2 weeks ago

165
Login Form

Amit Pachange

4 years ago

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

Abhiraj

1 year ago

2.6k
Sign in form

Simon Scheffer

3 years ago

17k
Sign In page CezeriLab

Sedat Kumcu

2 years ago

1.7k
Login Page
A responsive minimal login page built with pure HTML and Tailwind CSS. Includes social authentication buttons, email & password fields, remember me option, and a clean centered card design that's easy to integrate into SaaS and web applications.

JUGENDRA GANGWAR

1 month ago

12
Simple login page template

Freja Jensen

3 years ago

13.3k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.