Tier card with feature list.

The component#

html
<div class="rounded-2xl border p-8 flex flex-col"><h3 class="font-bold">Pro</h3><p class="mt-2 text-4xl font-black">$19<span class="text-base font-normal text-slate-500">/mo</span></p><ul class="mt-6 space-y-2 text-sm flex-1"><li>✓ Unlimited</li></ul><button class="mt-6 rounded-lg bg-blue-600 py-2.5 text-white font-semibold">Choose Pro</button></div>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components