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

565

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
Login Form With google icon

Author:
Md. Tofayel islam

11 months ago

1.8k
Instagram Login Clone
login form and signup

Author:
gidy

6 months ago

440
Login form

Author:
Aman kumar

1 year ago

4.4k
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

5k
Login

Author:
Amine Ghanim

8 months ago

2.1k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

10.7k
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

1 year ago

1.9k
login page
modern login form by salvator

Author:
Baraka Salvator

7 months ago

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

Author:
Anonymous

1 year ago

5.2k
Sign up form

Author:
Rajesh Maheshwari

9 months ago

958
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

5 months ago

1.1k
login
login by : html , css

Author:
Hacker Development

7 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components