Bulma Pricing Components

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <small class="mb-2 is-block is-uppercase has-text-weight-semibold">Pricing</small>
    <div class="columns is-6 mb-11 is-align-items-center">
      <div class="column mb-6 mb-0-tablet">
        <h2 class="title">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="column is-6 is-flex-tablet is-justify-content-end">
        <div class="is-inline-block p-2 has-background-light" style="border-radius: 4px;"><a class="button is-white px-8 py-6 mb-0 has-text-primary has-background-white has-text-weight-semibold" style="border-radius: 2px; ">Monthly</a><a class="button is-light px-8 py-6 has-text-grey-dark text-decoration-none" style="border-radius: 2px;">Yearly</a></div>
      </div>
    </div>
    <div class="columns has-mw-5xl mx-auto is-align-items-center">
      <div class="column has-text-centered has-background-white p-8 mb-12 mb-0-tablet" style="border-radius: 6px;">
        <h5 class="mb-2 title is-size-5 has-text-weight-medium">Starter</h5>
        <h3 class="title is-size-3 has-text-weight-medium mb-20 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          9,99
        </h3>
        <ul class="mb-8">
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
        <div class="buttons"><a class="button button is-primary is-outlined py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
      <div class="column is-relative has-text-centered has-background-grey-darker p-8 px-10 py-12 mb-12 mb-0-tablet" style="border-radius: 6px;">
        <img class="is-absolute is-left-0 is-top-0" style="top: -4px; left: -4px;" src="acros-assets/icons/pricing/bestseller.svg" alt="">
        <h5 class="mb-2 title is-size-5 has-text-weight-medium has-text-white">Pro</h5>
        <h3 class="title is-size-3 has-text-weight-medium has-text-white mb-20 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          14.99
        </h3>
        <ul class="mb-8">
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
          <li class="is-flex is-align-items-center has-text-white">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Premium support</small>
          </li>
        </ul>
        <div class="buttons"><a class="button button is-white py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
      <div class="column has-text-centered has-background-white p-8" style="border-radius: 6px;">
        <h5 class="mb-2 title is-size-5 has-text-weight-medium">Premium</h5>
        <h3 class="title is-size-3 has-text-weight-medium mb-20 is-flex is-justify-content-center">
          <span class="is-size-6 mr-1 mt-1">$</span>
          19,99
        </h3>
        <ul class="mb-8">
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Complete documentation</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>Working materials in Figma</small>
          </li>
          <li class="mb-2 is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>100GB cloud storage</small>
          </li>
          <li class="is-flex is-align-items-center has-grey-darker">
            <img class="mr-3" src="acros-assets/icons/pricing/check-circle.svg" alt="">
            <small>500 team members</small>
          </li>
        </ul>
        <div class="buttons"><a class="button button is-primary py-7 is-fullwidth" href="#">Get started</a></div>
      </div>
    </div>
  </div>
</section>