Pricing Comparison Table

<div class="container py-5">
  <h2 class="text-center fw-bold mb-4">Compare Plans</h2>
  <div class="table-responsive">
    <table class="table align-middle text-center">
      <thead>
        <tr>
          <th style="width:32%"></th>
          <th>Free</th>
          <th class="bg-primary text-white">Pro</th>
          <th>Team</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-start fw-semibold">Projects</td>
          <td>3</td>
          <td class="bg-primary-subtle">Unlimited</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <td class="text-start fw-semibold">Storage</td>
          <td>1GB</td>
          <td class="bg-primary-subtle">100GB</td>
          <td>1TB</td>
        </tr>
        <tr>
          <td class="text-start fw-semibold">Custom domain</td>
          <td>—</td>
          <td class="bg-primary-subtle">✓</td>
          <td>✓</td>
        </tr>
        <tr>
          <td class="text-start fw-semibold">Team seats</td>
          <td>1</td>
          <td class="bg-primary-subtle">5</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <td class="text-start fw-semibold">Support</td>
          <td>Email</td>
          <td class="bg-primary-subtle">Priority</td>
          <td>24/7 phone</td>
        </tr>
        <tr>
          <td></td>
          <td><a class="btn btn-outline-dark">Start</a></td>
          <td class="bg-primary-subtle"><a class="btn btn-primary">Start</a></td>
          <td><a class="btn btn-outline-dark">Contact</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>