auth signup register split-screen form auth signup register split form brand split-screen signup page registration form with brand panel
Auth Split
Fetch pattern JSON:
curl https://webspire.de/patterns/auth/split.json split.html
<section class="ws-auth flex min-h-screen">
<!-- Left: Form -->
<div class="flex flex-1 items-center justify-center bg-[var(--ws-auth-bg)] px-6 py-12">
<div class="w-full max-w-md">
<div>
<p class="text-2xl font-bold text-[var(--ws-auth-text)]">Webspire</p>
<h1 class="mt-6 text-2xl font-bold text-[var(--ws-auth-text)]">Create your account</h1>
<p class="mt-2 text-sm text-[var(--ws-auth-text-soft)]">Start your free trial. No credit card required.</p>
</div>
<form class="mt-8 space-y-5">
<div class="grid grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">First name</label>
<input type="text" id="first-name" name="first-name" autocomplete="given-name" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
placeholder="Jane">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Last name</label>
<input type="text" id="last-name" name="last-name" autocomplete="family-name" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
placeholder="Doe">
</div>
</div>
<div>
<label for="signup-email" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Email</label>
<input type="email" id="signup-email" name="email" autocomplete="email" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
placeholder="jane@company.com">
</div>
<div>
<label for="signup-password" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Password</label>
<input type="password" id="signup-password" name="password" autocomplete="new-password" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] placeholder:text-[var(--ws-auth-text-soft)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
placeholder="8+ characters">
</div>
<div class="flex items-start gap-2">
<input type="checkbox" id="terms" name="terms" required class="mt-0.5 h-4 w-4 rounded border-[var(--ws-auth-input-border)]">
<label for="terms" class="text-sm text-[var(--ws-auth-text-soft)]">
I agree to the <a href="#" class="text-[var(--ws-auth-action-bg)]">Terms</a> and <a href="#" class="text-[var(--ws-auth-action-bg)]">Privacy Policy</a>
</label>
</div>
<button type="submit" class="w-full rounded-lg bg-[var(--ws-auth-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-auth-action-text)] transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-action-bg)] focus:ring-offset-2">
Create account
</button>
</form>
<p class="mt-6 text-sm text-[var(--ws-auth-text-soft)]">
Already have an account? <a href="#" class="font-semibold text-[var(--ws-auth-action-bg)]">Sign in</a>
</p>
</div>
</div>
<!-- Right: Image / Brand panel -->
<div class="hidden flex-1 items-center justify-center bg-indigo-600 p-12 lg:flex">
<div class="max-w-md text-center text-white">
<p class="text-4xl font-bold leading-tight">Ship beautiful products faster than ever.</p>
<p class="mt-4 text-lg text-indigo-100">Join 500+ teams building with Webspire patterns and CSS effects.</p>
<div class="mt-8 flex justify-center gap-6 text-sm text-indigo-200">
<div class="text-center">
<p class="text-2xl font-bold text-white">500+</p>
<p>Teams</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-white">50k+</p>
<p>Developers</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-white">99%</p>
<p>Uptime</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
authsignupregistersplit-screenform
Slots
| Name | Required | Description |
|---|---|---|
| brand | Yes | App logo or name. |
| form | Yes | Registration form with name, email, password. |
| panel | Yes | Right-side brand panel with headline and stats. |
Split-screen layout: signup form on the left, branded panel on the right. The right panel (lg:flex) hides on mobile, making the form full-width. Replace the brand panel content with an image or custom illustration.