CodingModel: Claude 3.5 Sonnet / Cursor

Next.js 14 Responsive Component Generator with Tailwind

Generate clean, type-safe React functional components with Tailwind CSS styling and Lucide icons.

COPYABLE PROMPT TEMPLATE490 copies

Act as a senior frontend engineer specializing in Next.js 14 App Router, TypeScript, and Tailwind CSS.
Create a production-ready component for a [Insert Component, e.g. Premium Pricing Comparison Card with monthly/annual toggle].

Requirements:
1. Strict TypeScript interface for all props.
2. Modern Tailwind CSS styling with dark luxury aesthetic (charcoal backgrounds, subtle gold accents, glassmorphic borders).
3. Accessible keyboard navigation and ARIA attributes.
4. Clean Lucide React icons integrated.
5. Fully responsive from mobile (360px) to desktop (1440px).

Output only clean, copy-pasteable TypeScript code with no unnecessary explanation.