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? .
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.
