Step 1 of 3

How would you like to check out?

An account is optional — everything works without one.

Continue as guest

Fastest

You can turn this into an account from the receipt — the order comes with you.

or

Sign in

Use a provider

We only read your name and email address.

Payment encrypted end to end

Tracking sent to your inbox

No marketing without consent

Ordering means you accept our terms and privacy policy.

">

The prompt

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.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .