Here's a minimal and responsive waitlist form, centered on the screen, with a large heading, subheading, email input, and a prominent submit button, all styled with Tailwind CSS and including basic client-side validation.
This solution uses the Next.js App Router and includes:
div wrapping the Card uses flex min-h-screen items-center justify-center to center the content vertically and horizontally, and px-4 py-12 sm:px-6 lg:px-8 for responsive padding.CardTitle and CardDescription components, styled with large Tailwind font sizes and weights.Input component from shadcn/ui with type="email" and a placeholder.Button component from shadcn/ui, styled with a dark background and hover effects.useState for the email input and a handleSubmit function that checks for emptiness and a basic email format using a regex. An error message is displayed if validation fails.sr-only is applied to the email label for screen readers.This project leverages Tailwind CSS for styling, which is a utility-first CSS framework that integrates seamlessly with Next.js 123.