Login

This tailwind example is contributed by Amine Ghanim, on 09-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Amine Ghanim

335

Fork Fullscreen

<div class="w-[410px] bg-[#0d0c0f] z-50 rounded-[10px] py-8 px-8 text-white space-y-2 border-gray-400 border-[1px]">
    
    <div class="flex justify-between items-center mb-6">
      <div>
        <img src="/images/Logo.png" />
        <p class="text-[10px] text-gray-700">login to your account</p>
      </div>
      <button class="px-3 py-1 border-gray-400 border-[1px] rounded-lg">
        Close
      </button>
    </div>

<div>
      <div class="mb-2 font-bold text-[14px]">
        <label for="Email">Email</label>
      </div>
      <input
        type="text"
        class="bg-[#08070a] w-full py-2 mb-1 rounded-lg px-3 placeholder:text-gray-700 placeholder:text-[12px] placeholder:font-bold"
        placeholder="example@gmail.com"
        name="Email"
      />
    </div>

<div>
      <div class="mb-2 font-bold text-[14px]">
        <label for="Password">Password</label>
      </div>
      <input
        type="text"
        name="Password"
        class="bg-[#08070a] py-2 w-full rounded-lg px-3 placeholder:text-gray-700 placeholder:text-[12px] placeholder:font-bold"
        placeholder="* * * * * * * * * * *"
      />
    </div>

<div class="text-center text-[12px] font-bold py-3">
      Forgot Password
    </div>

<div>
      <button class="w-full mb-2 bg-white rounded-lg text-gray-600 py-2">
        Login
      </button>
    </div>

<div class="text-gray-300 text-center text-[10px]">
      Don't have an account?
      <a href="/Signup">
        <span class="text-white font-bold hover:underline cursor-pointer">
          Sign up
        </span>
      </a>
    </div>
  </div>

<div class="z-50 mt-6">
    <script type="text/javascript"
      src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
      data-name="bmc-button" data-slug="amine_gha10" data-color="#FFDD00"
      data-emoji="" data-font="Bree" data-text="Buy me a coffee"
      data-outline-color="#000000" data-font-color="#000000"
      data-coffee-color="#ffffff">
    </script>
  </div>
</div>

Related Examples

Sign in / Login Form

Author:
Bunny

3 years ago

13.3k
Login form #2
Login form design

Author:
QQ-VVN

4 months ago

903
Register form

Author:
Maxim

8 months ago

1.1k
Neon login Form #3
Login form neon design.

Author:
QQ-VVN

4 months ago

345
login from

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

1.2k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

3 months ago

250
Sign in form

Author:
Simon Scheffer

2 years ago

15.6k
Sign up form

Author:
Rajesh Maheshwari

6 months ago

656
Modern Sign Up 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. 😊🎨

Author:
AyDin VM

1 year ago

4.2k
cards
html , css ,

Author:
Hacker Development

4 months ago

486
Welcome Back

Author:
Tanvir Islam

7 months ago

995
Instagram Login Clone

Author:
Victoria Blount

3 months ago

176

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components