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

745

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

Author:
Aman kumar

4 months ago

383
Sign In page CezeriLab

Author:
Sedat Kumcu

11 months ago

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

Author:
Abhiraj

8 months ago

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

Author:
Aman kumar

6 months ago

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

Author:
Ameth Galarcio

1 year ago

2.3k
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

21.5k
Login Form

Author:
UI-Templates

10 hours ago

6
Login form #1
login form design

Author:
QQ-VVN

5 months ago

119
Login Card

Author:
Anonymous

1 year ago

3k
Login form

Author:
Leon Bachmann

2 years ago

13k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

9 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

425

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12