Responsive Pricing Plan Comparison Table

<section class="w-full max-w-6xl mr-auto ml-auto pt-12 pr-4 pb-12 pl-4">
  <div class="ring-1 ring-black/5 bg-white rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-sm">
    <div class="flex items-start justify-between gap-4">
      <div class="">
        <h3 class="text-2xl font-semibold tracking-tight">Plan comparison</h3>
        <p class="text-sm text-gray-600 mt-1">Quick overview of what's included with each plan so you can pick the right
          fit.</p>
      </div>
      <div class="hidden sm:flex items-center gap-3">
        <span class="text-sm text-gray-500">Pricing basis</span>
        <div class="inline-flex rounded-xl bg-gray-50 ring-1 ring-black/5 p-1">
          <button id="monthlyBtnCompact" class="px-3 py-1 text-sm font-medium bg-white rounded-lg">Monthly</button>
          <button id="yearlyBtnCompact" class="px-3 py-1 text-sm font-medium text-gray-600 rounded-lg">Yearly</button>
        </div>
      </div>
    </div>

    <div class="mt-6 overflow-x-auto">
      <table class="w-full min-w-[720px] border-collapse text-sm">
        <thead class="">
          <tr class="text-left text-gray-600 text-xs uppercase">
            <th class="py-3 pr-4 bg-gray-50/50">Features</th>
            <th class="py-3 px-4 text-center bg-blue-50/30">Solo Creator</th>
            <th class="py-3 px-4 text-center bg-purple-50/30">Scale Team</th>
            <th class="py-3 px-4 text-center bg-gray-50/50">Enterprise</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          <tr class="bg-white">
            <td class="py-4 pr-4 w-1/2 text-gray-800 bg-gray-50/30">Price</td>
            <td class="py-4 px-4 text-center font-semibold text-gray-900 bg-blue-50/20">$29 / mo</td>
            <td class="py-4 px-4 text-center font-semibold text-gray-900 bg-purple-50/20">$79 / seat / mo</td>
            <td class="py-4 px-4 text-center font-semibold text-gray-900 bg-gray-50/30">Custom</td>
          </tr>

          <tr class="bg-gray-50/20">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/50">Projects</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/30">10 active</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-purple-50/30">Unlimited</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-gray-50/50">Unlimited</td>
          </tr>

          <tr class="bg-white">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/30">Shared libraries</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/20">Limited</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-purple-50/20">Included</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-gray-50/30">Included</td>
          </tr>

          <tr class="bg-gray-50/20">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/50">Roles &amp; permissions</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/30">—</td>
            <td class="py-4 px-4 text-center bg-purple-50/30">
              <svg xmlns="http://www.w3.org/2000/svg" data-lucide="check"
                class="lucide lucide-check w-4 h-4 inline-block text-emerald-600" viewBox="0 0 24 24" fill="none"
                stroke="currentColor">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </td>
            <td class="py-4 px-4 text-center bg-gray-50/50">
              <svg xmlns="http://www.w3.org/2000/svg" data-lucide="check"
                class="lucide lucide-check w-4 h-4 inline-block text-emerald-600" viewBox="0 0 24 24" fill="none"
                stroke="currentColor">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </td>
          </tr>

          <tr class="bg-white">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/30">SSO / SAML &amp; audit logs</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/20">—</td>
            <td class="py-4 px-4 text-center bg-purple-50/20">
              <svg xmlns="http://www.w3.org/2000/svg" data-lucide="check"
                class="lucide lucide-check w-4 h-4 inline-block text-emerald-600" viewBox="0 0 24 24" fill="none"
                stroke="currentColor">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </td>
            <td class="py-4 px-4 text-center bg-gray-50/30">
              <svg xmlns="http://www.w3.org/2000/svg" data-lucide="check"
                class="lucide lucide-check w-4 h-4 inline-block text-emerald-600" viewBox="0 0 24 24" fill="none"
                stroke="currentColor">
                <path d="M20 6 9 17l-5-5" class=""></path>
              </svg>
            </td>
          </tr>

          <tr class="bg-gray-50/20">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/50">AI credits (monthly)</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/30">200</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-purple-50/30">1,000</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-gray-50/50">Custom allocation</td>
          </tr>

          <tr class="bg-white">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/30">Support</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/20">Email 24/7</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-purple-50/20">Priority</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-gray-50/30">Dedicated success</td>
          </tr>

          <tr class="bg-gray-50/20">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/50">Uptime SLA</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/30">—</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-purple-50/30">99.9%</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-gray-50/50">99.99%</td>
          </tr>

          <tr class="bg-white">
            <td class="py-4 pr-4 text-gray-800 bg-gray-50/30">Custom onboarding &amp; integrations</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-blue-50/20">—</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-purple-50/20">Available</td>
            <td class="py-4 px-4 text-center text-gray-700 bg-gray-50/30">Included</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
      <p class="text-sm text-gray-600">Need a tailored plan? Enterprise includes SLAs, custom billing, and a dedicated
        onboarding team.</p>
      <div class="flex items-center gap-3">
        <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gray-900 text-white shadow-sm hover:bg-black transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black/40">
        <svg xmlns="http://www.w3.org/2000/svg" data-lucide="clipboard-copy" class="lucide lucide-clipboard-copy w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" class=""></path><rect x="8" y="2" width="8" height="4" rx="1" class=""></rect><path d="M9 13h6" class=""></path><path d="M12 10v6" class=""></path></svg>
        <span class="font-medium">Contact sales</span>
      </button>
        <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white text-gray-900 ring-1 ring-black/10 hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black/20">
        <svg xmlns="http://www.w3.org/2000/svg" data-lucide="download" class="lucide lucide-download w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="M7 10 12 15 17 10" class=""></path><path d="M12 15V3" class=""></path></svg>
        <span class="text-sm font-medium">Download CSV</span>
      </button>
      </div>
    </div>
  </div>
</section>