Pricing Compare

<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <h2 class="mb-8 text-center text-2xl font-bold text-[var(--ws-pricing-text)]">Compare Plans</h2>

    <div class="overflow-x-auto">
      <table class="w-full min-w-[600px] text-left text-sm">
        <thead>
          <tr class="border-b border-[var(--ws-pricing-card-border)]">
            <th class="py-4 pr-4 font-medium text-[var(--ws-pricing-text-muted)]">Features</th>
            <th class="px-4 py-4 text-center font-semibold text-[var(--ws-pricing-text)]">Starter</th>
            <th class="px-4 py-4 text-center font-semibold text-blue-600">Pro</th>
            <th class="px-4 py-4 text-center font-semibold text-[var(--ws-pricing-text)]">Enterprise</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-[var(--ws-pricing-card-border)]">
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">Projects</td>
            <td class="px-4 py-3 text-center text-[var(--ws-pricing-text-muted)]">3</td>
            <td class="px-4 py-3 text-center font-medium text-[var(--ws-pricing-text)]">Unlimited</td>
            <td class="px-4 py-3 text-center font-medium text-[var(--ws-pricing-text)]">Unlimited</td>
          </tr>
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">Team Members</td>
            <td class="px-4 py-3 text-center text-[var(--ws-pricing-text-muted)]">1</td>
            <td class="px-4 py-3 text-center font-medium text-[var(--ws-pricing-text)]">10</td>
            <td class="px-4 py-3 text-center font-medium text-[var(--ws-pricing-text)]">Unlimited</td>
          </tr>
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">Storage</td>
            <td class="px-4 py-3 text-center text-[var(--ws-pricing-text-muted)]">5 GB</td>
            <td class="px-4 py-3 text-center font-medium text-[var(--ws-pricing-text)]">100 GB</td>
            <td class="px-4 py-3 text-center font-medium text-[var(--ws-pricing-text)]">Unlimited</td>
          </tr>
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">API Access</td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-pricing-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
          </tr>
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">Priority Support</td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-pricing-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
          </tr>
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">Custom Branding</td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-pricing-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-pricing-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
          </tr>
          <tr>
            <td class="py-3 pr-4 text-[var(--ws-pricing-text-soft)]">SLA Guarantee</td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-pricing-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
            <td class="px-4 py-3 text-center"><svg class="mx-auto h-5 w-5 text-[var(--ws-pricing-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
            <td class="px-4 py-3 text-center text-sm font-medium text-[var(--ws-pricing-text)]">99.9%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>