Pricing Design 3

<div class="container py-5">
  <h2 class="text-center fw-bold mb-5">Choose your plan</h2>
  <div class="row g-4">
    <div class="col-md-4">
      <div class="p-4 rounded-4 border h-100 ">
        <h5 class="fw-bold">Starter</h5>
        <div class="display-5 fw-bold">$9<small class="fs-6 fw-normal">/mo</small></div>
        <ul class="list-unstyled mt-3">
          <li><i class="bi bi-check2 me-2"></i>Unlimited components</li>
          <li><i class="bi bi-check2 me-2"></i>Priority support</li>
          <li><i class="bi bi-check2 me-2"></i>Lifetime updates</li>
        </ul><a class="btn btn-primary w-100" href="#">Choose Starter</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="p-4 rounded-4 border h-100 bg-dark text-white">
        <h5 class="fw-bold">Pro</h5>
        <div class="display-5 fw-bold">$29<small class="fs-6 fw-normal">/mo</small></div>
        <ul class="list-unstyled mt-3">
          <li><i class="bi bi-check2 me-2"></i>Unlimited components</li>
          <li><i class="bi bi-check2 me-2"></i>Priority support</li>
          <li><i class="bi bi-check2 me-2"></i>Lifetime updates</li>
        </ul><a class="btn btn-light w-100" href="#">Choose Pro</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="p-4 rounded-4 border h-100 ">
        <h5 class="fw-bold">Business</h5>
        <div class="display-5 fw-bold">$79<small class="fs-6 fw-normal">/mo</small></div>
        <ul class="list-unstyled mt-3">
          <li><i class="bi bi-check2 me-2"></i>Unlimited components</li>
          <li><i class="bi bi-check2 me-2"></i>Priority support</li>
          <li><i class="bi bi-check2 me-2"></i>Lifetime updates</li>
        </ul><a class="btn btn-primary w-100" href="#">Choose Business</a>
      </div>
    </div>
  </div>
</div>