Auth Forms
Guest or account checkout gate
Three ways past the sign-in wall
Three ways past the sign-in wall
Build a checkout identity step with Tailwind CSS offering three routes. Use a max-w-lg card with a small step label reading "Step 1 of 3", a heading, and a muted line saying an account is optional. The first block is the recommended route: a bordered card with a neutral-900 ring holding a heading, an email field, a dark "Continue as guest" button and a muted line explaining an account can be created afterwards from the receipt. Below a divider labelled "or", two compact routes side by side: a bordered card for signing in with an email field, a password field and an outline button, and a bordered card for social sign-in with two full-width provider buttons. At the bottom, a row of three trust notes with glyphs — encrypted payment, order tracking by email, and no marketing without consent — plus a line linking terms and privacy.<section class="mx-auto max-w-lg px-6 py-14">
<p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Step 1 of 3</p>
<h1 class="mt-3 text-2xl font-semibold tracking-tight text-neutral-900">How would you like to check out?</h1>
<p class="mt-1.5 text-sm text-neutral-500">An account is optional — everything works without one.</p>
<div class="mt-7 rounded-2xl border border-neutral-200 bg-white p-6 ring-1 ring-neutral-900">
<div class="flex items-center justify-between">
<h2 class="text-sm font-semibold text-neutral-900">Continue as guest</h2>
<span class="rounded-full bg-neutral-900 px-2.5 py-0.5 text-[11px] font-medium text-white">Fastest</span>
</div>
<label class="mt-4 block text-xs font-medium text-neutral-700">Email for the receipt</label>
<input type="email" placeholder="[email protected]"
class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
<button class="mt-4 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Continue as guest</button>
<p class="mt-2.5 text-xs text-neutral-500">You can turn this into an account from the receipt — the order comes with you.</p>
</div>
<div class="my-6 flex items-center gap-3 text-xs uppercase tracking-widest text-neutral-400">
<span class="h-px flex-1 bg-neutral-200"></span>or<span class="h-px flex-1 bg-neutral-200"></span>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div class="rounded-2xl border border-neutral-200 bg-white p-5">
<h2 class="text-sm font-semibold text-neutral-900">Sign in</h2>
<input type="email" placeholder="Email"
class="mt-3 w-full rounded-xl border border-neutral-200 px-3 py-2 text-sm outline-none transition focus:border-neutral-900" />
<input type="password" placeholder="Password"
class="mt-2 w-full rounded-xl border border-neutral-200 px-3 py-2 text-sm outline-none transition focus:border-neutral-900" />
<button class="mt-3 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Sign in</button>
</div>
<div class="rounded-2xl border border-neutral-200 bg-white p-5">
<h2 class="text-sm font-semibold text-neutral-900">Use a provider</h2>
<button class="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.3 2.47 3.45 5.47 3.45 9S14.3 18.53 12 21c-2.3-2.47-3.45-5.47-3.45-9S9.7 5.47 12 3Z"/></svg> Continue with Google</button>
<button class="mt-2 flex w-full items-center justify-center gap-2 rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M15 21v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.7-1.4 5.7-6.2 0-1.4-.5-2.5-1.3-3.4.1-.3.6-1.7-.1-3.4 0 0-1.1-.3-3.6 1.3a12.4 12.4 0 0 0-6.5 0C6.2 2.2 5.1 2.5 5.1 2.5c-.7 1.7-.2 3.1-.1 3.4a5 5 0 0 0-1.3 3.4c0 4.8 2.9 5.9 5.7 6.2-.5.5-.6 1-.5 2V21"/><path d="M9 18c-2.7.8-2.7-1.3-3.8-1.6"/></svg> Continue with GitHub</button>
<p class="mt-3 text-xs text-neutral-400">We only read your name and email address.</p>
</div>
</div>
<div class="mt-8 grid gap-3 border-t border-neutral-200 pt-6 text-xs text-neutral-500 sm:grid-cols-3">
<p class="flex items-start gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg> <span>Payment encrypted end to end</span></p>
<p class="flex items-start gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg> <span>Tracking sent to your inbox</span></p>
<p class="flex items-start gap-2"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>No marketing without consent</span></p>
</div>
<p class="mt-4 text-center text-[11px] text-neutral-400">
Ordering means you accept our <a href="#" class="underline">terms</a> and <a href="#" class="underline">privacy policy</a>.
</p>
</section>