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

241

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 with google provider
Login with google provider

Author:
Aman kumar

3 months ago

595
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

1 year ago

4.7k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

328
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

2 months ago

434
Login Card

Author:
Anonymous

1 year ago

6.3k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

39.8k
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. 😊🎨

Author:
AyDin VM

1 year ago

6.2k
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

2 years ago

49k
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

5 months ago

1k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

1 year ago

2k
Responsive login form with image

Author:
Anonymous

10 months ago

1.1k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components