Card or Block Layout
Organizes discrete content units into a scannable grid. Each card is self-contained — its own visual boundary, hierarchy, and action — making information easy to compare and browse.
AI Prompt
Build a SaaS pricing page in Next.js with Tailwind CSS using a 3-column card grid. Cards should use `rounded-2xl`, `border border-slate-200`, and a hover state of `shadow-lg` and `-translate-y-1` with `transition-all duration-200`. Card anatomy from top to bottom: (1) plan tier badge in `text-xs font-semibold tracking-widest uppercase`, (2) price in `text-5xl font-black` with `/month` in `text-lg text-slate-400`, (3) one-line plan description in `text-slate-500 text-sm`, (4) a full-width CTA button, (5) a divider, (6) a feature list where each item has a checkmark SVG icon in `text-green-500` and a label. The "Pro" card should be the featured tier: give it `border-2 border-indigo-500`, `shadow-indigo-100 shadow-xl`, and a "Most popular" pill badge absolutely positioned at the card top. Use `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` with `gap-6`. Above the grid: a centered section header with a toggle for Monthly/Annual billing (switching Annual shows "2 months free" badge). All three cards should have equal height using `h-full flex flex-col` — CTA pushes to bottom with `mt-auto`.