Three Tier Pricing

<section class="py-5 bg-light">
  <div class="container py-4">
    <h2 class="text-center fw-bold mb-5">Simple Pricing</h2>
    <div class="row g-4 justify-content-center">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm text-center p-4">
          <h5 class="fw-bold">Starter</h5>
          <h2 class="display-4 fw-bold my-3">$0</h2>
          <ul class="list-unstyled mb-4">
            <li class="py-1"><i class="bi bi-check2 text-success me-2"></i>Up to 3 projects</li>
            <li class="py-1"><i class="bi bi-check2 text-success me-2"></i>Community support</li>
          </ul><a href="#" class="btn btn-outline-primary mt-auto">Get Started</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-primary border-2 shadow text-center p-4 position-relative"><span class="badge bg-primary position-absolute top-0 start-50 translate-middle">POPULAR</span>
          <h5 class="fw-bold">Pro</h5>
          <h2 class="display-4 fw-bold my-3">$19<small class="fs-6 text-muted">/mo</small></h2>
          <ul class="list-unstyled mb-4">
            <li class="py-1"><i class="bi bi-check2 text-success me-2"></i>Unlimited projects</li>
            <li class="py-1"><i class="bi bi-check2 text-success me-2"></i>Priority support</li>
          </ul><a href="#" class="btn btn-primary mt-auto">Choose Pro</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm text-center p-4">
          <h5 class="fw-bold">Enterprise</h5>
          <h2 class="display-4 fw-bold my-3">$49<small class="fs-6 text-muted">/mo</small></h2>
          <ul class="list-unstyled mb-4">
            <li class="py-1"><i class="bi bi-check2 text-success me-2"></i>SSO & SLA</li>
            <li class="py-1"><i class="bi bi-check2 text-success me-2"></i>Dedicated manager</li>
          </ul><a href="#" class="btn btn-outline-primary mt-auto">Contact Sales</a>
        </div>
      </div>
    </div>
  </div>
</section>