Bootstrap Pricing Components

<section class="pt-32 pb-44 bg-secondary-dark">
  <div class="container mx-auto">
    <div class="text-center mb-24">
      <h2 class="text-white mb-14">Choose a plan</h2>
      <p class="text-secondary-light mb-0">The quick brown fox jumps over the lazy dog.</p>
    </div>
    <div>
      <div class="row align-items-center">
        <div class="col-12 col-xl-4 mb-6 mb-xl-0">
          <div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 rounded bg-secondary">
            <div class="px-2 pb-6 mb-12 border-bottom">
              <div class="d-flex align-items-end justify-content-between">
                <h4 class="text-white mb-0">Free</h4>
                <p class="h5 fw-bold text-white mb-0">$0,00</p>
              </div>
            </div>
            <ul class="mb-20">
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">Complete files</span>
              </li>
              <li class="d-flex align-items-center mb-5">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">10GB cloud storage</span>
              </li>
              <li class="d-flex align-items-center">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">5 team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="btn btn-outline-light" href="#">Try free</a></div>
          </div>
        </div>
        <div class="col-12 col-xl-4 mb-6 mb-xl-0">
          <div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 bg-primary rounded-3">
            <div class="px-2 pb-6 mb-12 border-bottom">
              <div class="d-flex align-items-end justify-content-between">
                <h4 class="text-white mb-0">Team</h4>
                <p class="h5 fw-bold text-white mb-0">$9,90</p>
              </div>
            </div>
            <ul class="mb-20">
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">Complete files</span>
              </li>
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">10GB cloud storage</span>
              </li>
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">20 team members</span>
              </li>
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">Unlimited anonymous editors</span>
              </li>
              <li class="d-flex align-items-center">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">10GB cloud storage</span>
              </li>
            </ul>
            <div class="text-center"><a class="btn btn-outline-light" href="#">Buy now</a></div>
          </div>
        </div>
        <div class="col-12 col-xl-4">
          <div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 rounded bg-secondary">
            <div class="px-2 pb-6 mb-12 border-bottom">
              <div class="d-flex align-items-end justify-content-between">
                <h4 class="text-white mb-0">Premium</h4>
                <p class="h5 fw-bold text-white mb-0">$29,90</p>
              </div>
            </div>
            <ul class="mb-20">
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">Complete files</span>
              </li>
              <li class="d-flex align-items-center mb-5">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">10GB cloud storage</span>
              </li>
              <li class="d-flex align-items-center">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg>
                <span class="ms-6 text-white">5 team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="btn btn-outline-light" href="#">Buy now</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>