Sign in to Northwind

This account is protected with a passkey.

R

rae@northwind.co

Last used 2 days ago

Not you?

Your device will ask for Face ID, a fingerprint or your device PIN. Nothing leaves this machine.

or

Hardware security keys are supported on this account.

">

The prompt

Build a passkey-first sign-in card with Tailwind CSS. Centre a max-w-sm white card with rounded-2xl corners and a soft border on a neutral-50 page. Inside: a small dark rounded logo tile, a heading reading "Sign in to Northwind", and a muted line saying the account uses a passkey. Show the remembered account as a bordered row with a round avatar initial, the email address, and a "Not you?" link on the right. Under it, a full-width dark button labelled "Continue with passkey" carrying a shield glyph, then a caption explaining the device will ask for Face ID, a fingerprint or the device PIN. Add a hairline divider with the word "or", two outline buttons for "Use a one-time code" and "Sign in with password", and a footer line about security keys. Keep every control at least 44px tall and give the buttons visible focus rings.

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

More auth forms prompts

All Auth Forms prompts →