Featured
ComparisonsComparison Table
A plan-versus-feature matrix built as a real table, with readable boolean cells.
#comparison#table#pricing
6 frameworksBeginner
Loading…
A two-product spec sheet built from a definition list that stacks cleanly on mobile.
<!--
A three-up spec sheet from a <dl>. On mobile the header row hides and each
value carries its own inline product label, so the sheet stacks without
losing which value belongs to which product - no table to scroll.
-->
<section class="w-full rounded-xl border border-gray-200 dark:border-gray-800">
<div class="hidden grid-cols-[1fr_1fr_1fr] gap-3 border-b border-gray-200 px-4 py-3 sm:grid dark:border-gray-800">
<span class="text-sm font-semibold text-gray-500 dark:text-gray-400">Spec</span>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Model A</span>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Model B</span>
</div>
<dl class="divide-y divide-gray-100 dark:divide-gray-800">
<div class="grid grid-cols-1 gap-1 px-4 py-3 sm:grid-cols-[1fr_1fr_1fr] sm:gap-3">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Memory</dt>
<dd class="m-0 text-sm text-gray-900 dark:text-gray-100"><span class="font-semibold text-gray-400 sm:hidden dark:text-gray-500">Model A: </span>8 GB</dd>
<dd class="m-0 text-sm text-gray-900 dark:text-gray-100"><span class="font-semibold text-gray-400 sm:hidden dark:text-gray-500">Model B: </span>16 GB</dd>
</div>
<div class="grid grid-cols-1 gap-1 px-4 py-3 sm:grid-cols-[1fr_1fr_1fr] sm:gap-3">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Storage</dt>
<dd class="m-0 text-sm text-gray-900 dark:text-gray-100"><span class="font-semibold text-gray-400 sm:hidden dark:text-gray-500">Model A: </span>256 GB</dd>
<dd class="m-0 text-sm text-gray-900 dark:text-gray-100"><span class="font-semibold text-gray-400 sm:hidden dark:text-gray-500">Model B: </span>1 TB</dd>
</div>
</dl>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
productArequired | string | - | The columns being compared, in display order. |
productBrequired | string | - | The columns being compared, in display order. |
specsrequired | SpecRow[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
Built from a `<dl>` rather than a table so it needs no horizontal scroll: on mobile the header row hides and each value carries its own inline product label, so a stacked spec never loses which value belongs to which product. Set `productA` / `productB` for the column names and feed any number of `specs`.