Feature matrix across plans
Create a pricing comparison table with Tailwind CSS. A sticky header row with three plan columns (Free, Pro, Business) and their prices/CTAs, then grouped feature rows with checkmarks or dashes per plan. Use zebra striping, a left-aligned feature column, and center-aligned plan cells. Make it horizontally scrollable on small screens.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a pricing comparison table with Tailwind CSS. A sticky header row with three plan columns (Free, Pro, Business) and their prices/CTAs, then grouped feature rows with checkmarks or dashes per plan. Use zebra striping, a left-aligned feature column, and center-aligned plan cells. Make it horizontally scrollable on small screens.<section class="mx-auto max-w-4xl px-6 py-16">
<div class="overflow-x-auto rounded-2xl border border-neutral-200">
<table class="w-full text-sm">
<thead class="bg-neutral-50 text-neutral-900">
<tr>
<th class="p-4 text-left font-medium">Features</th>
<th class="p-4 text-center font-medium">Free<span class="block text-xs font-normal text-neutral-500">$0/mo</span></th>
<th class="p-4 text-center font-medium">Pro<span class="block text-xs font-normal text-neutral-500">$24/mo</span></th>
<th class="p-4 text-center font-medium">Business<span class="block text-xs font-normal text-neutral-500">$79/mo</span></th>
</tr>
</thead>
<tbody class="divide-y divide-neutral-100 text-neutral-600">
<tr><td class="p-4">Projects</td><td class="p-4 text-center">1</td><td class="p-4 text-center">Unlimited</td><td class="p-4 text-center">Unlimited</td></tr>
<tr class="bg-neutral-50/60"><td class="p-4">Team members</td><td class="p-4 text-center">1</td><td class="p-4 text-center">10</td><td class="p-4 text-center">Unlimited</td></tr>
<tr><td class="p-4">Analytics</td><td class="p-4 text-center text-neutral-300">–</td><td class="p-4 text-center text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></td><td class="p-4 text-center text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></td></tr>
<tr class="bg-neutral-50/60"><td class="p-4">SSO</td><td class="p-4 text-center text-neutral-300">–</td><td class="p-4 text-center text-neutral-300">–</td><td class="p-4 text-center text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></td></tr>
</tbody>
</table>
</div>
</section>