Login Card for React

Each label and input sit in a Field. FieldLabel points at its input with htmlFor, and the input has the matching id. Clicking a label focuses its field.

Wrap the content in a form, make Login type="submit", and give the inputs a name and required. The demo has no form or handler, so the buttons do nothing yet.

In a flex items-center justify-between row with the password label, above the input. It's a plain link: point its href at your reset page.

Login, the default filled button, and Login with Google, variant="outline". Both are w-full. Add your provider's logo before the second label, or more outline buttons for more providers.

CardFooter with justify-center and one line in text-sm text-muted-foreground: Don't have an account? and a Sign up link.

Up to max-w-md with w-full, so it fills a phone screen and stops at 28rem. The fields and buttons stack with gap-4, and each label sits gap-2 above its input.