Pricing Components in Acros library

<section class="py-16 bg-gray-50" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-center -mx-4 mb-10">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-sm font-semibold uppercase">Pricing</span>
        <h2 class="max-w-xl font-heading text-3xl sm:text-4xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="inline-flex items-center p-2 bg-gray-100 rounded">
            <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium rounded-sm" :class="{ 'text-green-500 bg-white': pricing == $refs.pricing1.textContent, 'text-gray-900 hover:text-gray-700': pricing != $refs.pricing1.textContent }" href="#">Monthly</a>
            <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium rounded-sm" href="#" :class="{ 'text-green-500 bg-white': pricing == $refs.pricing2.textContent, 'text-gray-900 hover:text-gray-700': pricing != $refs.pricing2.textContent }">Yearly</a>
        </div>
      </div>
    </div>
    <div class="max-w-md lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/3">
          <div class="p-8 bg-white rounded-md">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-lg">Starter</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-lg">$</span>
                <span x-text="pricing == $refs.pricing1.textContent ? '9,99' : '19,98'" class="font-heading font-medium text-3xl leading-10">9,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base text-green-500 hover:text-white border border-green-500 hover:bg-green-500 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3">
          <div class="relative py-12 px-8 bg-gray-900 rounded-md">
            <img class="absolute top-0 left-0 -ml-1 -mt-1" src="acros-assets/elements/bestseller.svg" alt="">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-white text-lg">Pro</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-white text-lg">$</span>
                <span x-text="pricing == $refs.pricing1.textContent ? '14,99' : '29,98'" class="font-heading font-medium text-white text-3xl leading-10">14,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base bg-white hover:bg-gray-100 border border-white hover:border-gray-100 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3">
          <div class="p-8 bg-white rounded-md">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-lg">Premium</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-lg">$</span>
                <span x-text="pricing == $refs.pricing1.textContent ? '19,99' : '39,98'" class="font-heading font-medium text-3xl leading-10">19,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<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>