auth register sign-up form multi-step password-strength modern
Auth Register
Multi-step registration page with centered card, password strength indicator, and social sign-up options.
modern Responsive
Live Preview
Sections
step-indicatorregistration-formsocial-signup
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>Create Account — Acme</title>
<meta name="description" content="Create your free account and get started in minutes." />
<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);
}
/* Template-specific helper */
.strength-bar { transition: width 0.3s ease, background-color 0.3s ease; }
</style>
</head>
<body class="min-h-screen antialiased" style="background: linear-gradient(135deg, #f8fafc, var(--ws-color-accent-bg));">
<!-- Top Navigation Bar -->
<nav class="ws-navbar border-b border-slate-100 bg-white/60 backdrop-blur-sm" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-14">
<a href="#" class="flex items-center gap-2">
<svg class="w-8 h-8" 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-lg font-bold text-slate-900">Acme</span>
</a>
<p class="text-sm text-slate-500">
Already have an account?
<a href="#" class="font-semibold transition-colors" style="color: var(--ws-color-accent);">Sign in</a>
</p>
</div>
</nav>
<div class="min-h-[calc(100vh-56px)] flex items-center justify-center p-4 sm:p-8">
<div class="w-full max-w-lg">
<!-- Card -->
<div class="ws-auth bg-white rounded-2xl shadow-xl shadow-slate-200/50 border border-slate-100 p-8 sm:p-10">
<!-- Step Indicator -->
<div class="flex items-center justify-center gap-2 mb-8" aria-label="Registration progress">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full text-white text-sm font-semibold flex items-center justify-center" style="background: var(--ws-color-accent);" aria-current="step">1</div>
<span class="text-sm font-medium hidden sm:inline" style="color: var(--ws-color-accent);">Account</span>
</div>
<div class="w-12 h-px bg-slate-300" aria-hidden="true"></div>
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-slate-200 text-slate-400 text-sm font-semibold flex items-center justify-center">2</div>
<span class="text-sm font-medium text-slate-400 hidden sm:inline">Profile</span>
</div>
<div class="w-12 h-px bg-slate-300" aria-hidden="true"></div>
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-slate-200 text-slate-400 text-sm font-semibold flex items-center justify-center">3</div>
<span class="text-sm font-medium text-slate-400 hidden sm:inline">Workspace</span>
</div>
</div>
<!-- Heading -->
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-slate-900">Create your account</h1>
<p class="mt-2 text-slate-500">Start your 14-day free trial. No credit card required.</p>
</div>
<!-- Social Signup -->
<div class="grid grid-cols-2 gap-3 mb-6">
<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 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>
Sign up with 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 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>
Sign up with GitHub
</button>
</div>
<!-- Divider -->
<div class="relative mb-6">
<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-white px-4 text-slate-400">Or create with email</span></div>
</div>
<!-- Registration Form -->
<form class="ws-forms space-y-5" action="#" method="POST">
<div class="grid grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-slate-700 mb-1.5">First name</label>
<input type="text" id="first-name" name="first_name" autocomplete="given-name" required
class="w-full px-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="Jane" />
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-slate-700 mb-1.5">Last name</label>
<input type="text" id="last-name" name="last_name" autocomplete="family-name" required
class="w-full px-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="Doe" />
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-700 mb-1.5">Work email</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"
placeholder="jane@company.com" />
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-700 mb-1.5">Password</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="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="new-password" required minlength="8"
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="Min. 8 characters" />
</div>
<!-- Password Strength Indicator -->
<div class="mt-3 space-y-2.5">
<div class="flex gap-1.5">
<div class="h-1.5 flex-1 rounded-full strength-bar" style="background: var(--ws-color-accent);"></div>
<div class="h-1.5 flex-1 rounded-full strength-bar" style="background: var(--ws-color-accent);"></div>
<div class="h-1.5 flex-1 rounded-full bg-slate-200 strength-bar"></div>
<div class="h-1.5 flex-1 rounded-full bg-slate-200 strength-bar"></div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center gap-1.5">
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-xs text-slate-500">8+ characters</span>
</div>
<div class="flex items-center gap-1.5">
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-xs text-slate-500">Uppercase letter</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-3.5 h-3.5 rounded-full border-2 border-slate-300" aria-hidden="true"></div>
<span class="text-xs text-slate-400">Number</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-3.5 h-3.5 rounded-full border-2 border-slate-300" aria-hidden="true"></div>
<span class="text-xs text-slate-400">Special character</span>
</div>
</div>
</div>
</div>
<!-- Terms -->
<div class="flex items-start gap-2">
<input type="checkbox" id="terms" name="terms" required
class="mt-0.5 w-4 h-4 rounded border-slate-300" />
<label for="terms" class="text-sm text-slate-600 leading-relaxed">
I agree to the <a href="#" class="font-medium transition-colors" style="color: var(--ws-color-accent);">Terms of Service</a>
and <a href="#" class="font-medium transition-colors" style="color: var(--ws-color-accent);">Privacy Policy</a>
</label>
</div>
<!-- Marketing Opt-in -->
<div class="flex items-start gap-2">
<input type="checkbox" id="marketing" name="marketing"
class="mt-0.5 w-4 h-4 rounded border-slate-300" />
<label for="marketing" class="text-sm text-slate-500 leading-relaxed">
Send me product updates and tips (you can unsubscribe anytime)
</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);">
Create Account
</button>
</form>
</div>
<!-- Trust Badges -->
<div class="flex items-center justify-center gap-6 mt-8">
<div class="flex items-center gap-1.5">
<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>
<span class="text-xs text-slate-400">SSL Encrypted</span>
</div>
<div class="flex items-center gap-1.5">
<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.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>
<span class="text-xs text-slate-400">SOC 2 Compliant</span>
</div>
<div class="flex items-center gap-1.5">
<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="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>
<span class="text-xs text-slate-400">GDPR Ready</span>
</div>
</div>
</div>
</div>
</body>
</html>
Centered registration card with a 3-step progress indicator, name/email/password fields, visual password strength bar, terms acceptance, and social sign-up with Google and GitHub.