Output 1. Component Overview A three-column pricing grid that stacks on mobile and sits side by side on desktop. The Pro card is elevated with an indigo ring and badge to guide the eye. An accessible switch toggles billing, and prices update through React state. 2. Full Code import { useState } from "react"; const plans = [ { name: "Free", monthly: 0, yearly: 0, blurb: "Everything you need to get started.", features: ["1 active project", "Basic analytics", "Community support"], cta: "Get started free", featured: false, }, { name: "Pro", monthly: 29, yearly: 24, blurb: "For growing teams that ship fast.", features: ["Unlimited projects", "Advanced analytics", "Priority email support", "Custom domains"], cta: "Start 14-day trial", featured: true, }, { name: "Enterprise", monthly: 99, yearly: 79, blurb: "Security and control at scale.", features: ["Everything in Pro", "SSO and audit logs", "Dedicated success manager", "99.99% uptime SLA"], cta: "Contact sales", featured: false, }, ]; const Check = () => ( <svg className="h-5 w-5 flex-none text-emerald-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fillRule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 111.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z" clipRule="evenodd" /> </svg> ); export default function PricingSection() { const [yearly, setYearly] = useState(true); return ( <section className="bg-slate-50 py-16 sm:py-24 dark:bg-slate-900" aria-labelledby="pricing-heading"> <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div className="mx-auto max-w-2xl text-center"> <h2 id="pricing-heading" className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white"> Simple pricing that scales with you </h2> <p className="mt-4 text-lg text-slate-600 dark:text-slate-300"> Start free, upgrade when you're ready. Cancel anytime. </p> <div className="mt-8 flex items-center justify-center gap-3"> <span className={`text-sm font-medium ${!yearly ? "text-slate-900 dark:text-white" : "text-slate-500"}`}>Monthly</span> <button type="button" role="switch" aria-checked={yearly} aria-label="Toggle yearly billing" onClick={() => setYearly(!yearly)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 ${ yearly ? "bg-indigo-600" : "bg-slate-300 dark:bg-slate-600" }`} > <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${ yearly ? "translate-x-6" : "translate-x-1" }`} /> </button> <span className={`text-sm font-medium ${yearly ? "text-slate-900 dark:text-white" : "text-slate-500"}`}> Yearly <span className="ml-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">Save 20%</span> </span> </div> </div> <div className="mx-auto mt-12 grid max-w-md gap-8 lg:max-w-none lg:grid-cols-3"> {plans.map((plan) => ( <article key={plan.name} className={`relative flex flex-col rounded-2xl border bg-white p-8 shadow-sm transition-shadow duration-200 hover:shadow-lg dark:bg-slate-800 ${ plan.featured ? "border-indigo-600 ring-2 ring-indigo-600 shadow-xl lg:scale-105" : "border-slate-200 dark:border-slate-700" }`} > {plan.featured && ( <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white"> Most Popular </span> )} <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{plan.name}</h3> <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">{plan.blurb}</p> <p className="mt-6 flex items-baseline gap-1"> <span className="text-4xl font-bold text-slate-900 dark:text-white">${yearly ? plan.yearly : plan.monthly}</span> <span className="text-sm text-slate-500 dark:text-slate-400">/month</span> </p> <ul className="mt-8 flex-1 space-y-3 text-sm text-slate-700 dark:text-slate-200"> {plan.features.map((f) => ( <li key={f} className="flex gap-3"> <Check /> {f} </li> ))} </ul> <a href="#" className={`mt-8 block rounded-lg px-4 py-3 text-center text-sm font-semibold transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-800 ${ plan.featured ? "bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800" : "bg-indigo-50 text-indigo-700 hover:bg-indigo-100 active:bg-indigo-200 dark:bg-slate-700 dark:text-indigo-300 dark:hover:bg-slate-600" }`} > {plan.cta} </a> </article> ))} </div> </div> </section> ); } 3. Responsive Behavior Mobile: Cards stack in one column, centered at a max width of 28rem. Tablet (md): Same single column with wider padding, so the cards stay readable. Desktop (lg+): Three equal columns, with the Pro card slightly scaled up. 4. Customization Guide Change indigo-600 to any Tailwind color to rebrand buttons, rings, and the badge. Edit the plans array to change names, prices, and features without touching the markup. Adjust py-16 sm:py-24 on the section for tighter or looser vertical spacing. Replace rounded-2xl with rounded-lg for a sharper look. Remove lg:scale-105 if you want all cards the same height. 5. Accessibility Notes Toggle uses role="switch" and aria-checked. Visible focus-visible rings on all interactive elements. Decorative icons use aria-hidden. Section is labelled via aria-labelledby; dark mode is supported through dark: variants.