Comparison table

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>