Bulma Pricing Components

<section class="is-relative section py-20">
  <img class="is-absolute is-top-0 mt-32 is-left-0 is-hidden-mobile" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-top-0 mt-40 is-right-0 is-hidden-mobile" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-20 has-text-centered">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-16 is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="is-inline-block mx-auto p-1 has-background-light is-rounded">
        <button class="button is-ghost px-8 py-5 has-text-dark has-background-white has-text-weight-semibold">Monthly</button>
        <button class="button is-ghost px-8 py-5 has-text-grey-dark">Yearly</button>
      </div>
    </div>
    <div class="columns is-vcentered">
      <div class="column is-4 mb-6 mb-0-desktop">
        <div class="box pt-12 pb-8 px-8 has-text-centered-desktop">
          <h3 class="mb-6 title is-6 has-text-grey-dark-light">Starter</h3>
          <div class="is-flex is-justify-content-center mb-4">
            <span class="is-inline-block mr-1 is-size-5 has-text-grey-dark-light">$</span>
            <p class="is-size-1 has-text-weight-semibold">34,99</p>
          </div>
          <ul class="mb-8 has-text-left">
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">Complete documentation</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">Working materials in Figma</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">100GB cloud storage</p>
            </li>
            <li class="is-flex is-align-items-center py-4">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">500 team members</p>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth" href="#">Try it now</a>
        </div>
      </div>
      <div class="column is-4 mb-6 mb-0-desktop">
        <div class="box pt-12 pb-8 px-8 has-background-danger has-text-centered-desktop">
          <h3 class="mb-6 title is-3 has-text-light">Pro</h3>
          <div class="is-flex is-justify-content-center mb-4">
            <span class="is-inline-block mr-1 is-size-5 has-text-light">$</span>
            <p class="is-size-1 has-text-weight-semibold has-text-white">65,99</p>
          </div>
          <ul class="mb-8 has-text-left">
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold has-text-white">Complete documentation</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold has-text-white">Working materials in Figma</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold has-text-white">100GB cloud storage</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid white;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold has-text-white">500 team members</p>
            </li>
            <li class="is-flex is-align-items-center py-4">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold has-text-white">Premium support</p>
            </li>
          </ul>
          <a class="button is-info is-fullwidth" href="#">Try it now</a>
        </div>
      </div>
      <div class="column is-4 mb-6 mb-0-desktop">
        <div class="box pt-12 pb-8 px-8 has-text-centered-desktop">
          <h3 class="mb-6 title is-6 has-text-grey-dark-light">Premium</h3>
          <div class="is-flex is-justify-content-center mb-4">
            <span class="is-inline-block mr-1 is-size-5 has-text-grey-dark-light">$</span>
            <p class="is-size-1 has-text-weight-semibold">99,99</p>
          </div>
          <ul class="mb-8 has-text-left">
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">Complete documentation</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">Working materials in Figma</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">100GB cloud storage</p>
            </li>
            <li class="is-flex is-align-items-center py-4" style="border-bottom: 1px solid #DADFE9;">
              <svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="has-text-weight-semibold">500 team members</p>
            </li>
          </ul>
          <a class="button is-primary is-fullwidth" href="#">Try it now</a>
        </div>
      </div>
    </div>
  </div>
</section>