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

672

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

Author:
Leon Bachmann

3 years ago

15.2k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

4 months ago

606
Login template

Author:
Gabriel Urbano

2 years ago

6.6k
Login Form simple
Login form design

Author:
QQ-VVN

9 months ago

740
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

50.1k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

10 months ago

730
Login page

Author:
Reuben Enahoro

1 year ago

2.2k
simple login
simple login

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

15
OTPverification

Author:
Ratikanta Pradhan

7 months ago

538
Sign-In Form with Tailwind CSS
Elegant sign in form

Author:
Carlos

1 year ago

1.6k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

3k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components