Login

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

Author Amine Ghanim

Tailwind v3.4 1.3k 6

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

Login form

Rajesh Maheshwari

1 year ago

2.6k
Signup And Signin page
Signup And Signin page with tab controller

Akram Khan

2 years ago

3.5k
3D login form and responsive designe
Made a resposnvie form and 3d animation

Sufyan jutt

9 months ago

576
Dark Glassmorphism Login Form
A modern dark login interface with frosted-glass styling, ambient aurora glows, translucent input fields, and vibrant gradient accents.

JUGENDRA GANGWAR

3 weeks ago

174
Sign up Form - Page

ABDO-SY

1 year ago

2k
NDUSTRIALCORE login
NDUSTRIALCORE

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
login
Dark mode login

Hacker Development

1 year ago

2k
Login form with fully functionl and best
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Sufyan jutt

1 year ago

955
Login/Register Form with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Modern Login 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. 😊🎨

AyDin VM

2 years ago

9k
Login page

Reuben Enahoro

1 year ago

2.9k
Loginpage

Ramesh Kumar Sah

1 year ago

1.1k