Pricing Table
A responsive pricing table built with React and Tailwind CSS, featuring multiple tiers, feature comparisons and a highlighted popular plan. Free to copy and customize.
PRO
$24/mo
- ✓ Unlimited components
- ✓ All 40 styles
- ✓ Figma + code export
Copy the code
export function PricingCard() {
return (
<div className="w-64 rounded-2xl border border-violet-500/50 bg-violet-500/10 p-6 text-white">
<p className="text-xs font-bold tracking-wider text-violet-300">PRO</p>
<p className="mt-1 text-4xl font-extrabold">$24<span className="text-base text-white/60">/mo</span></p>
<ul className="my-4 space-y-2 text-sm text-white/80">
<li>✓ Unlimited components</li>
<li>✓ All 40 styles</li>
<li>✓ Figma + code export</li>
</ul>
<button className="w-full rounded-xl bg-violet-600 py-3 font-bold">Choose Pro</button>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the pricing table
This pricing table is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.