Comparison Table

Feature-by-feature comparison across plans or products.

html

<table class="comp" data-highlight="Pro" style="--accent:#241430;">
  <caption class="comp__caption">Compare plans</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col" class="comp__col comp__col--Starter">Starter</th>
      <th scope="col" class="comp__col comp__col--Pro">Pro</th>
      <th scope="col" class="comp__col comp__col--Team">Team</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Projects</th><td>3</td><td>Unlimited</td><td>Unlimited</td></tr>
    <tr><th scope="row">Seats</th><td>1</td><td>5</td><td>Unlimited</td></tr>
    <tr><th scope="row">Support</th><td>Email</td><td>Priority</td><td>Dedicated</td></tr>
  </tbody>
</table>
<p class="comp__note">Most popular &middot; billed annually</p>
<style>
.comp { border-collapse: collapse; width: 100%; max-width: 480px; font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; }
.comp caption { text-align: left; font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.comp th, .comp td { padding: 10px 14px; border-bottom: 1px solid #24143018; text-align: center; }
.comp th[scope="row"] { text-align: left; font-weight: 600; }
.comp th[scope="col"] { font-weight: 700; }
.comp[data-highlight="Starter"] th.comp__col--Starter { background: var(--accent); color: #FAF7F2; }
.comp[data-highlight="Starter"] td:nth-child(2) { border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); font-weight: 700; }
.comp[data-highlight="Pro"] th.comp__col--Pro { background: var(--accent); color: #FAF7F2; }
.comp[data-highlight="Pro"] td:nth-child(3) { border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); font-weight: 700; }
.comp[data-highlight="Team"] th.comp__col--Team { background: var(--accent); color: #FAF7F2; }
.comp[data-highlight="Team"] td:nth-child(4) { border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); font-weight: 700; }
.comp__note { margin: 10px 0 0; font-size: 13px; color: #241430aa; }
</style>

tailwind

<table class="comp-tw w-full max-w-[480px] border-collapse font-sans text-sm text-[#241430] bg-[#FAF7F2]" data-highlight="Pro" style="--accent:#241430;">
  <caption class="text-left text-lg font-bold mb-3">Compare plans</caption>
  <thead>
    <tr>
      <th scope="col" class="px-3.5 py-2.5 border-b border-[#24143018]">Feature</th>
      <th scope="col" class="comp-tw__col comp-tw__col--Starter px-3.5 py-2.5 border-b border-[#24143018] text-center font-bold">Starter</th>
      <th scope="col" class="comp-tw__col comp-tw__col--Pro px-3.5 py-2.5 border-b border-[#24143018] text-center font-bold">Pro</th>
      <th scope="col" class="comp-tw__col comp-tw__col--Team px-3.5 py-2.5 border-b border-[#24143018] text-center font-bold">Team</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row" class="px-3.5 py-2.5 border-b border-[#24143018] text-left font-semibold">Projects</th><td class="px-3.5 py-2.5 border-b border-[#24143018] text-center">3</td><td class="px-3.5 py-2.5 border-b border-[#24143018] text-center">Unlimited</td><td class="px-3.5 py-2.5 border-b border-[#24143018] text-center">Unlimited</td></tr>
    <tr><th scope="row" class="px-3.5 py-2.5 border-b border-[#24143018] text-left font-semibold">Seats</th><td class="px-3.5 py-2.5 border-b border-[#24143018] text-center">1</td><td class="px-3.5 py-2.5 border-b border-[#24143018] text-center">5</td><td class="px-3.5 py-2.5 border-b border-[#24143018] text-center">Unlimited</td></tr>
    <tr><th scope="row" class="px-3.5 py-2.5 text-left font-semibold">Support</th><td class="px-3.5 py-2.5 text-center">Email</td><td class="px-3.5 py-2.5 text-center">Priority</td><td class="px-3.5 py-2.5 text-center">Dedicated</td></tr>
  </tbody>
</table>
<p class="mt-2.5 text-[13px] text-[#241430]/65">Most popular &middot; billed annually</p>
<style>
.comp-tw[data-highlight="Starter"] .comp-tw__col--Starter, .comp-tw[data-highlight="Pro"] .comp-tw__col--Pro, .comp-tw[data-highlight="Team"] .comp-tw__col--Team { background: var(--accent); color: #FAF7F2; }
</style>

react

export function ComparisonTable({
  heading = "Compare plans",
  highlightedPlan = "Pro",
  highlightLabel = "Most popular",
  accent = "#241430",
  showAnnualNote = true,
}) {
  const plans = ["Starter", "Pro", "Team"];
  const rows = [
    ["Projects", "3", "Unlimited", "Unlimited"],
    ["Seats", "1", "5", "Unlimited"],
    ["Support", "Email", "Priority", "Dedicated"],
  ];
  const headStyle = (plan) => plan === highlightedPlan ? { background: accent, color: "#FAF7F2" } : {};
  return (
    <>
      <table style={{ borderCollapse: "collapse", width: "100%", maxWidth: 480, font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
        <caption style={{ textAlign: "left", fontSize: 18, fontWeight: 700, marginBottom: 12 }}>{heading}</caption>
        <thead>
          <tr>
            <th scope="col" style={{ padding: "10px 14px", borderBottom: "1px solid #24143018" }}>Feature</th>
            {plans.map((plan) => (
              <th key={plan} scope="col" style={{ padding: "10px 14px", borderBottom: "1px solid #24143018", textAlign: "center", fontWeight: 700, ...headStyle(plan) }}>{plan}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map(([label, ...cells]) => (
            <tr key={label}>
              <th scope="row" style={{ padding: "10px 14px", borderBottom: "1px solid #24143018", textAlign: "left", fontWeight: 600 }}>{label}</th>
              {cells.map((cell, i) => (
                <td key={i} style={{ padding: "10px 14px", borderBottom: "1px solid #24143018", textAlign: "center",
                  fontWeight: plans[i] === highlightedPlan ? 700 : 400 }}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      {showAnnualNote && <p style={{ margin: "10px 0 0", fontSize: 13, color: "#241430aa" }}>{highlightLabel} &middot; billed annually</p>}
    </>
  );
}