Bootstrap Pricing Components

<section class="pt-28 pb-32 bg-light-light overflow-hidden">
  <div class="container">
    <div class="mw-md-xl mb-16">
      <p class="text-muted mb-4">Flexible Pricing Plan</p>
      <h2 class="fs-10 lh-sm mb-0">Everything you need to launch a website</h2>
    </div>
    <div class="row g-20">
      <div class="col-12 col-md-4">
        <div class="bg-transparent px-11 py-10 border-end rounded-3">
          <h2 class="fs-17 fw-semibold mb-1">Basic</h2>
          <p class="fs-19 text-muted mb-5">Best for freelancers</p>
          <div class="d-flex mb-9">
            <h3 class="position-relative me-1 fs-17 fw-semibold" style="top: 5px;">$</h3>
            <h3 class="fs-10 fw-semibold">
              <span>29</span>
              <span class="fs-17">/ m</span>
            </h3>
          </div>
          <div class="rounded-1 mb-9" style="padding: 2px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
            <button class="btn btn-light-light w-100 fs-20 px-9 py-4 text-uppercase" type="button" style="letter-spacing: 1px;">Join now</button>
          </div>
          <ul class="list-group list-group-flush">
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">100GB Cloud Storage</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">10 Email Connection</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">Daily Analytics</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="bg-transparent px-11 py-10 rounded-3">
          <h2 class="fs-17 fw-semibold mb-1">Premium</h2>
          <p class="fs-19 text-muted mb-5">Best for small agency</p>
          <div class="d-flex mb-9">
            <h3 class="position-relative me-1 fs-17" style="top: 5px;">$</h3>
            <h3 class="fs-10 fw-semibold">
              <span>99</span>
              <span class="fs-17">/ m</span>
            </h3>
          </div>
          <div class="rounded-1 mb-9" style="padding: 2px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
            <button class="btn btn-light-light w-100 fs-20 px-9 py-4 text-uppercase" type="button" style="letter-spacing: 1px;">Join now</button>
          </div>
          <ul class="list-group list-group-flush">
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">500GB Cloud Storage</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">50 Email Connection</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">Daily Analytics</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">Premium Support</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="position-relative bg-white px-11 py-10 rounded-3 shadow-lg">
          <h3 class="position-absolute top-0 end-0 mt-2 me-2 d-inline-block bg-light-light rounded-pill px-3 py-2 text-uppercase fs-20" style="letter-spacing: 1px;">Popular choice</h3>
          <h2 class="fs-17 fw-semibold mb-1">Enterprise</h2>
          <p class="fs-19 text-muted mb-5">Best for large agency</p>
          <div class="d-flex mb-9">
            <h3 class="position-relative me-1 fs-17" style="top: 5px;">$</h3>
            <h3 class="fs-10 fw-semibold">
              <span>199</span>
              <span class="fs-17">/ m</span>
            </h3>
          </div>
          <div class="rounded-1 mb-9">
            <button class="btn btn-light-light w-100 fs-20 px-9 py-4 text-uppercase" type="button" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Join now</button>
          </div>
          <ul class="list-group list-group-flush">
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">2TB Cloud Storage</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">Unlimited Email Connection</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">Daily Analytics</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0">Premium Support</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>