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 1.9k 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

Sign In form

Amit Pachange

3 years ago

12.7k
mechanical login
mechanical

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
Login/Register Form with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
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

2 weeks ago

8
login from

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.2k
Sign-in form - Htmlwind
Simple login form

Htmlwind

1 year ago

1.6k
Instagram Login Clone
login form and signup

gidy

1 year ago

1.1k
Form
form

Aman kumar

2 years ago

2.8k
Login form
responsive login page design

Aman kumar

2 years ago

5.1k
Simple generated login form
Login

Jerome Soriano

8 months ago

564
Allconnect Logic

Mario Williams

10 months ago

583
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. 😊🎨

Anonymous

2 years ago

3.7k

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.