Monthly/Yearly Toggle Pricing

<div class="container py-5 text-center">
  <h2 class="fw-bold">Simple, transparent pricing</h2>
  <div class="btn-group my-4"><button class="btn btn-outline-primary active">Monthly</button><button class="btn btn-outline-primary">Yearly (save 20%)</button></div>
  <div class="row g-4 text-start">
    <div class="col-md-4">
      <div class="p-4 border rounded-4 h-100">
        <h5>Starter</h5>
        <h1>$12<span class="fs-6 text-muted">/mo</span></h1>
        <hr>
        <ul class="list-unstyled">
          <li>✓ 3 projects</li>
          <li>✓ Basic analytics</li>
        </ul><a class="btn btn-outline-dark w-100">Sign up</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="p-4 border-primary border-2 rounded-4 h-100 shadow"><span class="badge bg-primary">Popular</span>
        <h5 class="mt-2">Growth</h5>
        <h1>$39<span class="fs-6 text-muted">/mo</span></h1>
        <hr>
        <ul class="list-unstyled">
          <li>✓ 25 projects</li>
          <li>✓ Advanced analytics</li>
          <li>✓ API access</li>
        </ul><a class="btn btn-primary w-100">Sign up</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="p-4 border rounded-4 h-100">
        <h5>Enterprise</h5>
        <h1>$99<span class="fs-6 text-muted">/mo</span></h1>
        <hr>
        <ul class="list-unstyled">
          <li>✓ Unlimited</li>
          <li>✓ SSO + audit logs</li>
          <li>✓ 24/7 phone</li>
        </ul><a class="btn btn-outline-dark w-100">Contact sales</a>
      </div>
    </div>
  </div>
</div>