comparison table features plans checkmarks comparison table features plans checkmarks pricing products feature comparison table plan comparison with checkmarks
Comparison Table
Fetch pattern JSON:
curl https://webspire.de/patterns/comparison/table.json table.html
<section class="ws-comparison bg-[var(--ws-comparison-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-4xl">Compare plans</h2>
<p class="mt-3 text-lg text-[var(--ws-comparison-text-soft)]">Find the perfect plan for your team's needs.</p>
</div>
<div class="mt-12 overflow-x-auto">
<table class="w-full min-w-[600px] text-left text-sm">
<caption class="sr-only">Feature comparison across Starter, Pro, and Enterprise plans</caption>
<thead>
<tr class="border-b border-[var(--ws-comparison-border)]">
<th scope="col" class="py-4 pr-6 font-medium text-[var(--ws-comparison-text-soft)]">Features</th>
<th scope="col" class="px-6 py-4 text-center font-semibold text-[var(--ws-comparison-text)]">Starter</th>
<th scope="col" class="rounded-t-xl bg-[var(--ws-comparison-highlight)]/10 px-6 py-4 text-center font-semibold text-[var(--ws-comparison-highlight)]">Pro</th>
<th scope="col" class="px-6 py-4 text-center font-semibold text-[var(--ws-comparison-text)]">Enterprise</th>
</tr>
</thead>
<tbody>
<!-- Category: Core -->
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 font-medium text-[var(--ws-comparison-text)]" colspan="4">Core</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Projects</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">5</td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Storage</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">10 GB</td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">100 GB</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">1 TB</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Team members</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">3</td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">25</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">Unlimited</td>
</tr>
<!-- Category: Features -->
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 font-medium text-[var(--ws-comparison-text)]" colspan="4">Features</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Custom domains</td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-border)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Analytics</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">Basic</td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">Advanced</td>
<td class="px-6 py-3 text-center text-[var(--ws-comparison-text-soft)]">Custom</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">API access</td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-border)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
</tr>
<!-- Category: Support -->
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 font-medium text-[var(--ws-comparison-text)]" colspan="4">Support</td>
</tr>
<tr class="border-b border-[var(--ws-comparison-border)]">
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Priority support</td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-border)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></td>
<td class="bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
</tr>
<tr>
<td class="py-3 pr-6 text-[var(--ws-comparison-text-soft)]">Dedicated manager</td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-border)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></td>
<td class="rounded-b-xl bg-[var(--ws-comparison-highlight)]/5 px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-border)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></td>
<td class="px-6 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-comparison-highlight)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
comparisontablefeaturesplanscheckmarks
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and description. |
| table | Yes | Comparison table with feature rows and plan columns. |
Feature comparison table with three plan columns (Starter, Pro, Enterprise) and categorized feature rows. Checkmarks and crosses indicate availability. Highlighted column for recommended plan. Responsive with horizontal scroll on mobile.