Bootstrap Components in Cronos library

<section class="py-20">
  <div class="container">
    <div class="mw-xl text-center mx-auto mb-12">
      <span class="badge bg-secondary-light">Lorem ipsum</span>
      <h2 class="my-6">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="lead lh-lg text-muted mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div><a class="pb-4 px-8 link-dark border-bottom border-success border-3 text-decoration-none fw-bold" href="#">Monthly</a><a class="pb-4 px-8 text-muted text-decoration-none" href="#">Yearly</a></div>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-4 mb-5 mb-lg-0">
        <div class="mw-xl mx-auto p-6 bg-light-light text-center">
          <h6 class="mb-4">Starter</h6>
          <h2 class="text-primary mb-6">$34,99</h2>
          <ul class="mb-6">
            <li class="d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">Working materials in Figma</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">100GB cloud storage</p>
            </li>
            <li class="d-flex align-items-center">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">500 team members</p>
            </li>
          </ul>
          <a class="btn btn-primary w-100" href="#">Start Now</a>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-5 mb-lg-0">
        <div class="mw-xl mx-auto p-6 bg-primary text-center">
          <h6 class="text-light mb-4">Pro</h6>
          <h2 class="text-white mb-6">$65,99</h2>
          <ul class="mb-6">
            <li class="d-flex align-items-center mb-2">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-white">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-white">Working materials in Figma</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-white">100GB cloud storage</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-white">500 team members</p>
            </li>
            <li class="d-flex align-items-center">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-white">Premium support</p>
            </li>
          </ul>
          <a class="btn btn-light w-100" href="#">Start Now</a>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mw-xl mx-auto p-6 bg-light-light text-center">
          <h6 class="mb-4">Premium</h6>
          <h2 class="text-primary mb-6">$99,99</h2>
          <ul class="mb-6">
            <li class="d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">Working materials in Figma</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">100GB cloud storage</p>
            </li>
            <li class="d-flex align-items-center">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">500 team members</p>
            </li>
          </ul>
          <a class="btn btn-primary w-100" href="#">Start Now</a>
        </div>
      </div>
    </div>
  </div>
</section>