Login Page

A responsive minimal login page built with pure HTML and Tailwind CSS. Includes social authentication buttons, email & password fields, remember me option, and a clean centered card design that's easy to integrate into SaaS and web applications.

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. Component is made with Tailwind v4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author JUGENDRA GANGWAR

Tailwind v4 2

Fork Fullscreen

<body class="min-h-screen bg-slate-50 flex items-center justify-center p-6">
  <div class="w-full max-w-md">
    <div class="mb-8 text-center">
      <h1 class="mt-4 text-3xl font-bold text-slate-900">Welcome back</h1>
      <p class="mt-2 text-sm text-slate-500">
        Sign in to continue to your account
      </p>
    </div>
    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
      <div class="grid grid-cols-2 gap-3">
        <button class="flex items-center justify-center gap-2 rounded-xl border border-slate-200 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
          <svg class="h-4 w-4" viewBox="0 0 24 24">
            <path fill="#EA4335" d="M12 11v3h7c-.3 1.7-2 5-7 5a8 8 0 1 1 0-16c2.3 0 3.8 1 4.7 1.8l2.5-2.4C17.6 1 15.1 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.8 11.5-11.6 0-.8-.1-1.4-.2-2.1H12z"/>
          </svg>
          Google
        </button>
        <button class="flex items-center justify-center gap-2 rounded-xl border border-slate-200 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 .5C5.6.5.5 5.7.5 12.2c0 5.2 3.4 9.6 8.1 11.1.6.1.8-.3.8-.6v-2.3c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.8.1-.8.1-.8 1.2.1 1.8 1.3 1.8 1.3 1 .1 2.1.8 2.6 1.3.1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.4-5.5-6A4.6 4.6 0 0 1 5.2 8c-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.3 11.3 0 0 1 6 0C16.9 4.6 18 5 18 5c.6 1.6.2 2.8.1 3.1a4.6 4.6 0 0 1 1.2 3.2c0 4.6-2.8 5.7-5.5 6 .4.3.8 1 .8 2v3c0 .3.2.7.8.6a11.7 11.7 0 0 0 8.1-11.1C23.5 5.7 18.4.5 12 .5Z"/>
          </svg>
          GitHub
        </button>
      </div>
      <div class="my-6 flex items-center">
        <div class="h-px flex-1 bg-slate-200"></div>
        <span class="px-3 text-xs uppercase tracking-wider text-slate-400">or</span>
        <div class="h-px flex-1 bg-slate-200"></div>
      </div>
      <form class="space-y-5">
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">
            Email
          </label>
          <input
            type="email"
            placeholder="you@example.com"
            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200"
          />
        </div>
        <div>
          <div class="mb-2 flex items-center justify-between">
            <label class="text-sm font-medium text-slate-700">
              Password
            </label>
            <a href="#" class="text-xs font-medium text-slate-600 hover:text-slate-900">
              Forgot?
            </a>
          </div>
          <input
            type="password"
            placeholder="••••••••"
            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-200"
          />
        </div>
        <div class="flex items-center justify-between text-sm">
          <label class="flex items-center gap-2 text-slate-600">
            <input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-400">
            Remember me
          </label>
        </div>
        <button class="w-full rounded-xl bg-slate-900 py-3 text-sm font-semibold text-white transition hover:bg-slate-800">
          Sign In
        </button>
      </form>
    </div>
    <p class="mt-6 text-center text-sm text-slate-500">
      Don't have an account?
      <a href="#" class="font-semibold text-slate-900 hover:underline">
        Create one
      </a>
    </p>
  </div>
</body>

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

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

3 years ago

12.1k