auth login sign-in form social-login split-screen modern
Auth Login
Split-screen login page with brand panel, social login options, and a clean modern form design.
modern Responsive
Live Preview
Sections
brand-panellogin-formsocial-login
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign In — Acme</title>
<meta name="description" content="Sign in to your account to access your dashboard, projects, and settings." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.5 0.22 272);
--ws-color-accent-light: oklch(0.58 0.18 272);
--ws-color-accent-dark: oklch(0.44 0.24 272);
--ws-color-accent-bg: oklch(0.96 0.04 272);
}
</style>
</head>
<body class="min-h-screen bg-slate-50 antialiased">
<div class="flex min-h-screen">
<!-- Left Brand Panel -->
<div class="hidden lg:flex lg:w-1/2 relative flex-col justify-between p-12 overflow-hidden text-white" style="background: linear-gradient(135deg, oklch(0.44 0.24 272), oklch(0.38 0.22 285));">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-10" aria-hidden="true">
<svg class="w-full h-full" viewBox="0 0 800 800" fill="none">
<circle cx="400" cy="400" r="350" stroke="white" stroke-width="0.5" />
<circle cx="400" cy="400" r="280" stroke="white" stroke-width="0.5" />
<circle cx="400" cy="400" r="210" stroke="white" stroke-width="0.5" />
<circle cx="400" cy="400" r="140" stroke="white" stroke-width="0.5" />
<circle cx="400" cy="400" r="70" stroke="white" stroke-width="0.5" />
<line x1="0" y1="400" x2="800" y2="400" stroke="white" stroke-width="0.3" />
<line x1="400" y1="0" x2="400" y2="800" stroke="white" stroke-width="0.3" />
</svg>
</div>
<!-- Floating Decorative Dots -->
<div class="absolute top-20 right-20 w-3 h-3 rounded-full bg-white/20" aria-hidden="true"></div>
<div class="absolute top-40 right-40 w-2 h-2 rounded-full bg-white/15" aria-hidden="true"></div>
<div class="absolute bottom-40 left-20 w-4 h-4 rounded-full bg-white/10" aria-hidden="true"></div>
<div class="absolute bottom-60 right-32 w-2 h-2 rounded-full bg-white/20" aria-hidden="true"></div>
<!-- Top: Logo -->
<div class="relative z-10">
<div class="flex items-center gap-3">
<svg class="w-10 h-10" viewBox="0 0 40 40" fill="none" aria-hidden="true">
<rect width="40" height="40" rx="10" fill="white" fill-opacity="0.2" />
<path d="M12 14h16M12 20h10M12 26h13" stroke="white" stroke-width="2.5" stroke-linecap="round" />
</svg>
<span class="text-2xl font-bold tracking-tight">Acme</span>
</div>
</div>
<!-- Center: Headline + Stats -->
<div class="relative z-10 space-y-8">
<h1 class="text-4xl xl:text-5xl font-bold leading-tight">
Build something<br />amazing today.
</h1>
<p class="text-lg max-w-md leading-relaxed" style="color: oklch(0.88 0.06 272);">
Join over 12,000 teams who trust Acme to manage their workflows, collaborate in real-time, and ship faster than ever before.
</p>
<!-- Stats Row -->
<div class="grid grid-cols-3 gap-6 pt-4">
<div>
<p class="text-3xl font-bold">12k+</p>
<p class="text-sm mt-1" style="color: oklch(0.78 0.1 272);">Active teams</p>
</div>
<div>
<p class="text-3xl font-bold">99.9%</p>
<p class="text-sm mt-1" style="color: oklch(0.78 0.1 272);">Uptime SLA</p>
</div>
<div>
<p class="text-3xl font-bold">4.9</p>
<p class="text-sm mt-1" style="color: oklch(0.78 0.1 272);">Star rating</p>
</div>
</div>
<!-- Testimonial Card -->
<div class="rounded-2xl p-6 max-w-md border border-white/10" style="background: oklch(1 0 0 / 0.1); backdrop-filter: blur(8px);">
<p class="leading-relaxed mb-4" style="color: oklch(0.92 0.04 272);">
"Acme transformed how our team works. We shipped 3x faster in the first month. The collaboration tools are second to none."
</p>
<div class="flex items-center gap-3">
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full border-2 flex items-center justify-center text-xs font-semibold" style="background: var(--ws-color-accent-light); border-color: var(--ws-color-accent-dark);">JK</div>
<div class="w-9 h-9 rounded-full border-2 flex items-center justify-center text-xs font-semibold" style="background: oklch(0.58 0.2 295); border-color: var(--ws-color-accent-dark);">AL</div>
<div class="w-9 h-9 rounded-full border-2 flex items-center justify-center text-xs font-semibold" style="background: oklch(0.62 0.2 350); border-color: var(--ws-color-accent-dark);">MR</div>
<div class="w-9 h-9 rounded-full border-2 flex items-center justify-center text-[10px] font-semibold" style="background: oklch(0.68 0.14 272); border-color: var(--ws-color-accent-dark);">+9k</div>
</div>
<div>
<p class="text-sm font-medium text-white">Jessica Kim</p>
<p class="text-xs" style="color: oklch(0.78 0.1 272);">CTO at Vercel</p>
</div>
</div>
</div>
</div>
<!-- Bottom: Footer -->
<div class="relative z-10 flex items-center justify-between">
<p class="text-sm" style="color: oklch(0.78 0.1 272);">© 2026 Acme Inc.</p>
<div class="flex items-center gap-4">
<a href="#" class="text-sm transition-colors hover:text-white" style="color: oklch(0.78 0.1 272);">Privacy</a>
<a href="#" class="text-sm transition-colors hover:text-white" style="color: oklch(0.78 0.1 272);">Terms</a>
</div>
</div>
</div>
<!-- Right Login Form -->
<div class="ws-auth w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-12">
<div class="w-full max-w-md space-y-8">
<!-- Mobile Logo -->
<div class="lg:hidden flex items-center gap-3 mb-4">
<svg class="w-9 h-9" viewBox="0 0 40 40" fill="none" aria-hidden="true">
<rect width="40" height="40" rx="10" style="fill: var(--ws-color-accent);" />
<path d="M12 14h16M12 20h10M12 26h13" stroke="white" stroke-width="2.5" stroke-linecap="round" />
</svg>
<span class="text-xl font-bold text-slate-900">Acme</span>
</div>
<!-- Heading -->
<div>
<h2 class="text-3xl font-bold text-slate-900">Welcome back</h2>
<p class="mt-2 text-slate-500">Sign in to your account to continue where you left off.</p>
</div>
<!-- Login Form -->
<form class="ws-forms space-y-5" action="#" method="POST">
<div>
<label for="email" class="block text-sm font-medium text-slate-700 mb-1.5">Email address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<input type="email" id="email" name="email" autocomplete="email" required
class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:border-transparent transition"
style="--tw-ring-color: var(--ws-color-accent);"
placeholder="you@example.com" />
</div>
</div>
<div>
<div class="flex items-center justify-between mb-1.5">
<label for="password" class="block text-sm font-medium text-slate-700">Password</label>
<a href="#" class="text-sm font-medium transition-colors" style="color: var(--ws-color-accent);">Forgot password?</a>
</div>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<input type="password" id="password" name="password" autocomplete="current-password" required
class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:border-transparent transition"
placeholder="Enter your password" />
</div>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" id="remember" name="remember"
class="w-4 h-4 rounded border-slate-300" />
<label for="remember" class="text-sm text-slate-600">Remember me for 30 days</label>
</div>
<button type="submit"
class="w-full py-3 px-4 rounded-xl text-white font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 transition shadow-sm"
style="background: var(--ws-color-accent);">
Sign in
</button>
</form>
<!-- Divider -->
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-slate-200"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="bg-slate-50 px-4 text-slate-400">Or continue with</span>
</div>
</div>
<!-- Social Login Buttons -->
<div class="grid grid-cols-2 gap-3">
<button type="button"
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl border border-slate-300 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
<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>
Google
</button>
<button type="button"
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl border border-slate-300 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 transition">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
</svg>
GitHub
</button>
</div>
<!-- Additional Social Options -->
<div class="grid grid-cols-2 gap-3">
<button type="button"
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl border border-slate-300 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 transition">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
</svg>
Apple
</button>
<button type="button"
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl border border-slate-300 bg-white text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 transition">
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M21 4.5v15A1.5 1.5 0 0 1 19.5 21h-15A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3H9v7.5H6.75l.75 3H9V21h3v-7.5h2.25l.75-3H12V3h7.5A1.5 1.5 0 0 1 21 4.5Z"/>
</svg>
Microsoft
</button>
</div>
<!-- Sign Up Link -->
<p class="text-center text-sm text-slate-500">
Don't have an account?
<a href="#" class="font-semibold transition-colors" style="color: var(--ws-color-accent);">Sign up for free</a>
</p>
<!-- Security Badge -->
<div class="flex items-center justify-center gap-2 pt-2">
<svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
<p class="text-xs text-slate-400">Protected with 256-bit SSL encryption</p>
</div>
</div>
</div>
</div>
</body>
</html>
Split-screen authentication page with a branded gradient panel on the left and a clean login form on the right. Includes email/password fields, remember-me checkbox, forgot password link, and social login with Google and GitHub.