Login

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 4

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

Sign in / Login Form

Bunny

4 years ago

14.6k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Ameth Galarcio

2 years ago

3.4k
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Jerome Soriano

2 years ago

2.6k
Login Form
Login Form With google icon

Md. Tofayel islam

1 year ago

2.1k
Full page sign-In form

Anonymous

2 years ago

4.4k
Beautiful page login
form with continue with google and continue with github buttons

Wagner

1 year ago

2.2k
Welcome Back

Tanvir Islam

1 year ago

1.7k
Elegant Login Form Design for Your Platform
A professionally designed and responsive login form built with TailwindCSS. Featuring a sleek layout with a gradient button, modern input fields, and user-friendly interactions, it’s perfect for any e-commerce, SaaS, or online platform. Includes options for "Forgot Password" and "Remember Me" functionality, providing a seamless user experience.

SHARIFUL ISLAM

1 year ago

1.9k
Search input asasasas
sasasasasas

Notify ahmedabad

2 years ago

1.8k
Sign in form
includes Google login button

pratik bhajankar

2 years ago

2.6k
login
Dark mode login

Hacker Development

1 year ago

2k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Anja Müller

3 years ago

8.6k

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.