Plan comparison matrix
An accessible pricing comparison table with grouped feature rows, a highlighted plan column and horizontal scroll on small screens.
Tailwind CSSPricingpricingtablecomparisonaccessibility
Live preview
Code
<div class="mx-auto max-w-4xl overflow-x-auto px-4">
<table class="w-full min-w-[34rem] border-collapse text-left text-sm">
<caption class="sr-only">Compare plans</caption>
<thead>
<tr>
<th scope="col" class="w-1/2 p-3"><span class="sr-only">Feature</span></th>
<th scope="col" class="p-3 text-center font-semibold text-slate-900">Starter<div class="font-normal text-slate-500">$9/mo</div></th>
<th scope="col" class="rounded-t-xl bg-indigo-600 p-3 text-center font-semibold text-white">Pro<div class="font-normal text-indigo-100">$29/mo</div></th>
<th scope="col" class="p-3 text-center font-semibold text-slate-900">Business<div class="font-normal text-slate-500">$79/mo</div></th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200">
<tr class="bg-slate-50"><th scope="colgroup" colspan="4" class="p-3 text-xs font-semibold uppercase tracking-wide text-slate-500">Usage</th></tr>
<tr>
<th scope="row" class="p-3 font-normal text-slate-700">Projects</th>
<td class="p-3 text-center">5</td><td class="bg-indigo-50 p-3 text-center font-medium">50</td><td class="p-3 text-center">Unlimited</td>
</tr>
<tr>
<th scope="row" class="p-3 font-normal text-slate-700">Team members</th>
<td class="p-3 text-center">1</td><td class="bg-indigo-50 p-3 text-center font-medium">10</td><td class="p-3 text-center">Unlimited</td>
</tr>
<tr class="bg-slate-50"><th scope="colgroup" colspan="4" class="p-3 text-xs font-semibold uppercase tracking-wide text-slate-500">Features</th></tr>
<tr>
<th scope="row" class="p-3 font-normal text-slate-700">Custom domain</th>
<td class="p-3 text-center text-slate-300"><span aria-hidden="true">—</span><span class="sr-only">Not included</span></td>
<td class="bg-indigo-50 p-3 text-center text-emerald-600"><span aria-hidden="true">✓</span><span class="sr-only">Included</span></td>
<td class="p-3 text-center text-emerald-600"><span aria-hidden="true">✓</span><span class="sr-only">Included</span></td>
</tr>
<tr>
<th scope="row" class="p-3 font-normal text-slate-700">Priority support</th>
<td class="p-3 text-center text-slate-300"><span aria-hidden="true">—</span><span class="sr-only">Not included</span></td>
<td class="bg-indigo-50 p-3 text-center text-slate-300"><span aria-hidden="true">—</span><span class="sr-only">Not included</span></td>
<td class="p-3 text-center text-emerald-600"><span aria-hidden="true">✓</span><span class="sr-only">Included</span></td>
</tr>
</tbody>
</table>
</div>
How it works
What it solves
Pricing cards show headlines, but buyers choosing between plans want a row-by-row comparison. A real table lets screen readers announce the plan and feature for every cell, which grids of divs cannot do.
How it works
Plans are column headers (scope="col") and each feature name is a row header (scope="row"). Section titles such as Usage and Features are full-width rows whose header spans four columns, which breaks the long list into groups without extra tables. The recommended plan is emphasised by a filled header and a tinted background on every cell in that column, so the highlight reads as one vertical band.
Included and excluded values use a check mark and a dash, but each is paired with hidden text ("Included", "Not included"), so the meaning is available to assistive technology and not only to people who see the symbols. The wrapper has overflow-x-auto and the table a min-w, so on phones people scroll sideways instead of seeing crushed columns.
Adapting it
- Add plans by adding a header cell and one cell per row.
- Generate rows from a feature configuration shared with your plan limits.
- Make the first column sticky with
sticky left-0 bg-whiteif you have many plans.
Pitfalls
- Keep the number of cells in each row equal to the number of headers.
- Do not rely on tint alone to mark the featured plan; the header changes too.
- Prices belong to the plan data, not to this template.
How to use it
- Add the table to your pricing page and load Tailwind CSS 4.
- Build the header cells from your plan list and the rows from a feature list.
- Output the included and excluded cell snippets from a small helper to avoid repetition.
- Highlight the plan you want to recommend by changing which column gets the tint classes.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.