Home
Lekhraj Ghimire
Sign In Form

Sign In Form

Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

This tailwind example is contributed by Lekhraj Ghimire, on 18-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner,Register, Sign in

Call to Action Login Form

Author Lekhraj Ghimire

Fork Fullscreen

<div class="max-w-md mx-auto p-8 bg-white shadow-xl rounded-xl border border-gray-200">
  <h2 class="text-2xl font-bold text-center text-blue-600 mb-6">Sign In</h2>
  <form class="space-y-4">
    <div>
      <label class="block mb-1 text-sm text-gray-600">Email Address</label>
      <input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="you@example.com" required>
    </div>
    <div>
      <label class="block mb-1 text-sm text-gray-600">Password</label>
      <input type="password" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="••••••••" required>
    </div>
    <div class="flex items-center justify-between">
      <label class="flex items-center">
        <input type="checkbox" class="mr-2">
        <span class="text-sm text-gray-600">Remember me</span>
      </label>
      <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
    </div>
    <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Sign In</button>
  </form>
  <p class="text-sm text-center text-gray-500 mt-6">Don't have an account? <a href="#"
      class="text-blue-500 hover:underline">Sign Up</a></p>
</div>

Related Examples

Login page
Login and register page, you can reuse both

Author:
Abhiraj

5 months ago

1.2k
Contact us Form with Responsive

Author:
KULDEEP

2 days ago

8
Simple login form

Author:
Freja Jensen

2 years ago

10.5k
Call to Action with Background image

Author:
Monica D.

11 months ago

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

1 month ago

124
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

176
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

2.1k
Register form

Author:
Maxim

6 months ago

888
LoginModal

Author:
Rohan Babu

1 year ago

3.1k
CTA Search Section
CTA search form

Author:
EliteAI Tools

6 months ago

673
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

6 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components