Login Form

Login Card Structure

This code gives you a complete, self-contained login card. Here's what's included:

Input Fields: Email and password fields with icons, labels, and placeholder text. The password field includes a "Forgot password?" link.

Options & Actions: A "Remember me" checkbox and a prominent "Sign In" button with hover effects.

Footer Links: A "Create one" link for new accounts and social login icons (Google and GitHub) for alternative sign-in methods.

This tailwind example is contributed by Muzammil Riaz, on 13-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form Other

Author Muzammil Riaz

Tailwind v3.4 175

Fork Fullscreen

<div class="w-full max-w-md bg-white/80 backdrop-blur-md shadow-2xl rounded-2xl p-8 space-y-6 border border-white/30">
  
  <div class="text-center">
    <h1 class="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
      Welcome Back
    </h1>
    <p class="text-gray-500 mt-2 text-sm">
      Sign in to your account to continue
    </p>
  </div>

<div class="relative flex items-center justify-center">
    <div class="border-t border-gray-200 w-full"></div>
    <div class="bg-white/70 px-4 rounded-full -mt-0.5">
      <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
      </svg>
    </div>
  </div>

<div class="space-y-5">
    
    <div class="space-y-1.5">
      <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
        </div>
        <input
          id="email"
          type="email"
          placeholder="you@example.com"
          class="block w-full pl-10 pr-3 py-2.5 border border-gray-200 rounded-xl bg-white/50 backdrop-blur-sm focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition-all duration-200 placeholder-gray-400 text-gray-800"
        />
      </div>
    </div>

<div class="space-y-1.5">
      <div class="flex justify-between items-center">
        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
        <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline transition-colors duration-200">Forgot password?</a>
      </div>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <input
          id="password"
          type="password"
          placeholder="••••••••"
          class="block w-full pl-10 pr-3 py-2.5 border border-gray-200 rounded-xl bg-white/50 backdrop-blur-sm focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition-all duration-200 placeholder-gray-400 text-gray-800"
        />
      </div>
    </div>

<div class="flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <input
          id="remember-me"
          type="checkbox"
          class="h-4 w-4 text-indigo-600 focus:ring-indigo-400 border-gray-300 rounded transition duration-200"
        />
        <label for="remember-me" class="text-sm text-gray-600 cursor-pointer">Remember me</label>
      </div>
      <span class="text-xs text-gray-400">Secure login</span>
    </div>

<button
      type="button"
      class="w-full flex items-center justify-center py-2.5 px-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200"
    >
      Sign In
    </button>
  </div>

<div class="text-center pt-2">
    <p class="text-sm text-gray-500">
      Don't have an account?
      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-800 hover:underline transition-colors duration-200">Create one</a>
    </p>
    <div class="mt-4 flex justify-center space-x-4">
      
      <a href="#" class="p-2 rounded-full border border-gray-200 hover:border-indigo-300 hover:bg-indigo-50 transition-all duration-200">
        <svg class="w-5 h-5 text-gray-600" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
        </svg>
      </a>
      
      <a href="#" class="p-2 rounded-full border border-gray-200 hover:border-indigo-300 hover:bg-indigo-50 transition-all duration-200">
        <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.03-2.682-.103-.253-.447-1.27.098-2.646 0 0 .84-.269 2.75 1.025.8-.223 1.65-.334 2.5-.334.85 0 1.7.111 2.5.334 1.91-1.294 2.75-1.025 2.75-1.025.545 1.376.201 2.393.099 2.646.64.698 1.03 1.591 1.03 2.682 0 3.841-2.337 4.687-4.565 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
        </svg>
      </a>
    </div>
  </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.8k
Login form

Gopi Yadav

3 years ago

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

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

3 years ago

12.1k