Elegant Login Form Design for Your Platform

A professionally designed and responsive login form built with TailwindCSS. Featuring a sleek layout with a gradient button, modern input fields, and user-friendly interactions, it’s perfect for any e-commerce, SaaS, or online platform. Includes options for "Forgot Password" and "Remember Me" functionality, providing a seamless user experience.

This tailwind example is contributed by SHARIFUL ISLAM, on 11-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author SHARIFUL ISLAM

Tailwind v3.4 1.9k 3

Fork Fullscreen

<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="w-full max-w-sm bg-white rounded-lg shadow-lg p-6 relative">
    <div class="flex justify-center">
      <Image alt="logo"
       src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjsScWYmyfPv3XdkNdEFVJ1wlDKMOgcSWUcg&s" class="h-12  mb-4" />
    </div>
    <h2 class="text-center text-gray-700 text-lg font-medium mb-2">
      Best online ecommerce website for you
    </h2>
    <div class="flex justify-center items-center relative mb-6">
      <span class="absolute inset-x-0 top-0 h-1 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></span>
      <h3 class="text-center bg-white px-4 text-gray-500 font-medium">Log in</h3>
    </div>

<form>
      <div class="mb-4">
        <label class="block text-sm text-gray-600 mb-1" for="email">Email or Phone</label>
        <input 
          type="text" 
          id="email" 
          class="w-full border border-gray-300 rounded px-3 py-2 text-gray-700 focus:outline-none focus:ring focus:ring-blue-200"
          placeholder="Email or Phone"
        />
      </div>
      <div class="mb-4 relative">
        <label class="block text-sm text-gray-600 mb-1" for="password">Password</label>
        <input 
          type="password" 
          id="password" 
          class="w-full border border-gray-300 rounded px-3 py-2 text-gray-700 focus:outline-none focus:ring focus:ring-blue-200"
          placeholder="Type your password"
        />
        <button 
          type="button" 
          class="absolute top-8 right-3 flex items-center text-gray-500">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.53A10.967 10.967 0 0112 6c2.64 0 5.064.947 6.983 2.53M21 12.04a10.967 10.967 0 01-2.535 6.984M8.475 19.527A10.967 10.967 0 0112 18a10.967 10.967 0 013.525-.527M9 12l2.5 2.5L15 9" />
          </svg>
        </button>
      </div>

<div class="flex items-center justify-between mb-4">
        <a href="#" class="text-sm text-blue-500 hover:underline">Forgot Password</a>
      </div>

<div class="flex items-center mt-4">
        <input type="checkbox" id="remember" class="mr-2 border-gray-300 rounded text-blue-500 focus:ring-blue-200" />
        <label for="remember" class="text-sm text-gray-600">Remember me for 30 days</label>
      </div>

<p class="text-center text-sm text-gray-600 mt-4">
        Don’t have your account? <a href="#" class="text-blue-500 hover:underline">Sign Up</a>
      </p>
    </form>
  </div>
</div>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.9k
Login form

Gopi Yadav

4 years ago

12.1k
Sign in / Login Form

Bunny

4 years ago

14.6k
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.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

4 years ago

12.1k