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

601

1

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

Login form

Author:
Leon Bachmann

2 years ago

14.5k
login page

Author:
Abid Ullah

1 year ago

1.9k
login
login by : html , css

Author:
Hacker Development

3 months ago

767
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

2 months ago

217
login
Dark mode login

Author:
Hacker Development

3 months ago

640
Login form

Author:
Leon Bachmann

2 years ago

12.8k
Login Form simple
Login form design

Author:
QQ-VVN

3 months ago

234
Login form #1
login form design

Author:
QQ-VVN

3 months ago

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

Author:
Anja Müller

1 year ago

10.5k
Login Card

Author:
Anonymous

1 year ago

2.8k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

3 years ago

22.8k
Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

1.7k

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