Bulma Pricing Components

<section class="has-background-light py-24 is-clipped is-relative">
    <img class="is-absolute is-right-0" style="top: 50%; transform: translateY(-50%);" src="flaro-assets/images/pricing/gradient.svg" alt="">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-6">
                <h2 class="mb-16 title is-size-1 has-text-weight-bold">Pick a plan</h2>
                <h3 class="mb-6 has-text-dark has-text-weight-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
                <p class="has-text-weight-medium has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
            </div>
            <div class="column is-6">
                <div class="mx-auto is-clipped" style="border-radius: 20px;">
                    <div class="p-9" style="background: rgba(255, 255, 255, 0.09);">
                        <span class="mb-7 is-inline-block has-text-grey has-text-weight-semibold">Features included:</span>
                        <ul>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <p class="has-text-weight-semibold has-text-dark">3 Team Members</p>
                            </li>
                            <li class="mb-4 is-flex is-align-content-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>

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

<section class="section py-24 has-background-white">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Choose a plan</h1>
      <p class="subtitle">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>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-touch is-4-desktop">
        <div class="has-mw-md mx-auto p-8-touch p-8-desktop p-12-widescreen has-background-primary-light">
          <div class="mb-12 is-flex is-justify-content-space-between is-align-items-flex-end">
            <h2 class="title is-size-3 mb-0">Free</h2>
            <h5 class="title is-size-5 is-size-4-widescreen has-text-primary mb-0">$0,00</h5>
          </div>
          <ul class="mb-10">
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 component categorie</span>
            </li>
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 mobile component</span>
            </li>
            <li class="is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">

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

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 has-leading-4 has-text-white mt-6 mb-10">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 class="buttons is-centered"><a class="button py-3 is-size-6 is-white" href="#">Monthly</a><a class="button py-3 is-size-6 is-dark" href="#">Yearly</a></div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen">
        <div class="is-relative has-mw-md mx-auto is-fullheight pt-20 pb-10 px-10 has-background-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex pl-12 pr-6 py-3 is-align-items-center has-background-info-dark has-text-weight-semibold is-uppercase clip-path-right-top-sm" style="width: 190px;">
            <span class="is-size-7 has-letter-space has-text-white">Starter</span>
          </div>
          <div class="is-flex is-flex-wrap-wrap is-align-items-end mb-8">
            <h3 class="is-flex is-align-items-start has-text-white has-text-weight-semibold">
              <span class="is-size-1">$34</span>
              <span class="is-size-3">99</span>
            </h3>
            <small class="pl-4 pb-3 has-text-info">/per month</small>
          </div>
          <ul class="mb-6">
            <li class="mb-4">
              <span class="mr-4 has-text-info">

<section class="section is-background-no-repeat is-background-contain" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <h2 class="title is-spaced is-max-w-lg mx-auto">
        <span>Start saving time today and</span>
        <span class="has-text-primary">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="subtitle is-max-w-sm mx-auto">Best for freelance developers who need to save their time.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="py-6 box has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="title is-size-3 my-3">Begginer</h3>
          <span class="title is-size-3 is-spaced has-text-primary">$32.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">3 Emails</span>

<section class="section">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-12 has-text-centered">
      <span class="tag is-warning is-light">Lorem ipsum</span>
      <h2 class="my-6 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="subtitle 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="px-8 pb-4 has-text-dark has-text-weight-bold" style="border-bottom: 2px solid #006251" href="#">Monthly</a><a class="px-8 pb-4" href="#">Yearly</a></div>
    </div>
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-4-desktop mb-5 mb-0-desktop">
        <div class="p-6 has-mw-xl mx-auto has-text-centered has-background-light">
          <h6 class="mb-4 is-size-4 has-text-weight-bold">Starter</h6>
          <h2 class="title is-size-2 has-text-primary is-spaced mb-6">$34,99</h2>
          <ul class="mb-6">
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-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="has-text-grey-dark mb-0">Complete documentation</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-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>

<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-10 is-8-desktop mb-5 has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Monthly</a><a class="button" href="#">Yearly</a></div>
      </div>
    </div>
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-4-desktop mb-5">
        <div class="box has-background-light has-text-centered">
          <h4 class="has-text-grey-dark">Starter</h4>
          <span class="mb-5 is-inline-block is-size-1 is-size-3-mobile has-text-weight-bold">$34,99</span>
          <ul class="mb-5">
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="mb-0">Complete documentation</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-grey mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">

<section class="section has-background-white-ter" x-data="{ toggle: false }">
  <div class="container">
    <div class="has-mw-md has-mw-lg-desktop has-mw-none-widescreen mx-auto">
      <div class="has-mw-3xl mb-20">
        <h1 class="title is-size-2 is-size-1-widescreen" style="letter-spacing: -0.04em;">Premium Membership</h1>
      </div>
      <div class="is-flex-tablet mb-10 is-align-items-center">
        <span class="is-block-mobile is-size-6" :class="{ 'has-text-dark': !toggle, 'has-text-grey': toggle }">Billed monthly</span>
        <div class="my-4-mobile mx-4-tablet is-inline-flex has-background-dark" style="padding: 2px; border-radius: 999px;">
          <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': toggle, 'is-white': !toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
          <button x-on:click="toggle = !toggle" class="button p-0" :class="{ 'is-light has-background-transparent': !toggle, 'is-white': toggle }" style="width: 26px; height: 26px; border-radius: 999px;"></button>
        </div>
        <div class="is-block-mobile is-inline-flex-tablet is-align-items-center">
          <span class="mr-3 is-inline-block is-size-6" :class="{ 'has-text-dark': toggle, 'has-text-grey': !toggle }">Billed yearly</span>
          <span class="tag is-light is-size-7 px-3 py-1 is-inline-block has-text-dark">20% SAVE</span>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-4-widescreen">
          <div class="box px-8 pt-10 pb-10 is-covered" style="height: 100%">
            <span class="mb-2 is-block is-size-6 has-text-weight-medium has-text-dark">Starter plan</span>
            <h3 class="mb-4 is-size-2 has-text-dark" style="letter-spacing: -0.04em;">Free</h3>
            <p class="mb-8 has-text-dark">During this phase the design is developed to meet the required technical standards to</p>
            <a class="button is-outlined is-dark is-rounded mb-16 is-fullwidth" href="#">Get started</a>