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

955

1

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 Form simple
Login form design

Author:
QQ-VVN

4 months ago

292
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

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

Author:
Emdadul Islam

1 year ago

1.9k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

3 months ago

117
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.4k
Sign in form

Author:
Simon Scheffer

2 years ago

15.7k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

8 months ago

1.2k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

4 months ago

291
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

8 months ago

1.2k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

3 months ago

356
Forgot password?
you can change password an time

Author:
gidy

3 months ago

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

Author:
Aman kumar

5 months ago

502

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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