Pricing Components in Asitrastudio library

Pricing from asitrastudio

<section class="py-12 md:py-24 bg-coolGray-50" x-data="{ toggle: false }">
  <div class="container mx-auto px-4">
    <div class="max-w-md lg:max-w-none mx-auto">
      <div class="max-w-3xl mb-20">
        <h1 class="font-heading text-6xl sm:text-8xl lg:text-10xl tracking-tighter">Premium Membership</h1>
      </div>
      <div class="flex flex-col xs:flex-row mb-10 items-center">
        <span :class="{'text-coolGray-500': toggle}" class="text-xl">Billed monthly</span>
        <div class="inline-flex p-0.5 my-4 xs:my-0 xs:mx-4 lg:mx-8 bg-black rounded-full">
          <button :class="{'bg-white': !toggle, 'bg-transparent': toggle }" class="inline-block w-7 h-7 bg-white rounded-full" x-on:click="toggle = !toggle"></button>
          <button :class="{'bg-white': toggle, 'bg-transparent': !toggle }" class="inline-block w-7 h-7 rounded-full" x-on:click="toggle = !toggle"></button>
        </div>
        <div class="inline-flex items-center">
          <span :class="{'text-coolGray-500': !toggle}" class="inline-block mr-3 text-xl text-coolGray-500">Billed yearly</span>
          <span class="inline-block py-1.5 px-3 text-xs border-1.5 border-black rounded-full">20% SAVE</span>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-5 lg:mb-0">
          <div class="h-full pt-10 pb-10 px-8 border rounded-4xl">
            <span class="block mb-2 text-xl font-medium">Starter plan</span>
            <h3 class="text-7xl tracking-tighter mb-4">Free</h3>
            <p class="text-coolGray-600 mb-8">During this phase the design is developed to meet the required technical standards to</p>
            <a class="block mb-16 py-5 px-4 text-center leading-none font-medium text-black hover:text-white border-1.5 hover:bg-black border-black rounded-full transition duration-150" href="#">Get started</a>
            <ul>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Core engagement survey</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Topic-based assessments</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Custom topic-based assessments</span>
              </li>
              <li class="flex items-center">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Filterable heatmap &amp; analytics</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-5 lg:mb-0">
          <div class="relative h-full pt-10 pb-10 px-8 border rounded-4xl overflow-hidden">
            <img class="absolute top-0 end-0" src="asitrastudio-assets/pricing/shadow-blue.png" alt="">
            <span class="block mb-2 text-xl font-medium">Basic plan</span>
            <div class="flex mb-4 items-end">
              <h3 :class="{'block': !toggle, 'hidden': toggle}" class="text-7xl tracking-tighter">$29</h3>
              <h3 :class="{'block': toggle, 'hidden': !toggle}" class="hidden text-7xl tracking-tighter">$299</h3>
              <span :class="{'block': !toggle, 'hidden': toggle}" class="ml-2 text-lg text-coolGray-600">/month</span>
              <span :class="{'block': toggle, 'hidden': !toggle}" class="hidden ml-2 text-lg text-coolGray-600">/yearly</span>
            </div>
            <p class="text-coolGray-600 mb-8">During this phase the design is developed to meet the required technical standards to</p>
            <a class="block mb-16 py-5 px-4 text-center leading-none font-medium text-white bg-blue-500 hover:bg-black rounded-full transition duration-150" href="#">Get started</a>
            <ul>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Performance reviews</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">360º feedback</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Competencies</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Calibration</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Talent Matrix</span>
              </li>
              <li class="flex items-center">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Career Paths &amp; Plans</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="h-full pt-10 pb-10 px-8 border rounded-4xl">
            <span class="block mb-2 text-xl font-medium">Starter plan</span>
            <div class="flex mb-4 items-end">
              <h3 :class="{'block': !toggle, 'hidden': toggle}" class="text-7xl tracking-tighter">$59</h3>
              <h3 :class="{'block': toggle, 'hidden': !toggle}" class="hidden text-7xl tracking-tighter">$699</h3>
              <span :class="{'block': !toggle, 'hidden': toggle}" class="ml -2 text-lg text-coolGray-500">/month</span>
              <span :class="{'block': toggle, 'hidden': !toggle}" class="ml -2 text-lg text-coolGray-500">/yearly</span>
            </div>
            <p class="text-coolGray-600 mb-8">During this phase the design is developed to meet the required technical standards to</p>
            <a class="block mb-16 py-5 px-4 text-center leading-none font-medium text-black hover:text-white border-1.5 hover:bg-black border-black rounded-full transition duration-150" href="#">Get started</a>
            <ul>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Goal setting with OKRs</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">OKR chart view</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Naming customization</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Jira &amp; Salesforce Integration</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Data insights</span>
              </li>
              <li class="flex items-center mb-4">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">Enterprise-grade security</span>
              </li>
              <li class="flex items-center">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4">iOS &amp; Android apps</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from asitrastudio

Bulma

asitrastudio

<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>
            <ul>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Core engagement survey</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Topic-based assessments</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Custom topic-based assessments</span>
              </li>
              <li class="is-flex is-align-items-center">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Filterable heatmap &amp; analytics</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="column is-12-tablet is-4-widescreen">
          <div class="box px-8 pt-10 pb-10 is-relative is-clipped is-covered" style="height: 100%">
            <img class="is-absolute is-top-0 is-right-0" src="asitrastudio-assets/pricing/shadow-blue.png" alt="">
            <span class="mb-2 is-block is-size-6 has-text-weight-medium has-text-dark">Basic plan</span>
            <div class="mb-4 is-flex is-align-items-end">
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': toggle }" style="letter-spacing: -0.04em;">$29</h3>
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': !toggle }" style="letter-spacing: -0.04em;">$299</h3>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': toggle }">/month</span>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': !toggle }">/yearly</span>
            </div>
            <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-primary is-rounded mb-16 is-fullwidth" href="#">Get started</a>
            <ul>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Performance reviews</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">360&ordm; feedback</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Competencies</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Calibration</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Talent Matrix</span>
              </li>
              <li class="is-flex is-align-items-center">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Career Paths &amp; Plans</span>
              </li>
            </ul>
          </div>
        </div>
        <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">Professional plan</span>
            <div class="mb-4 is-flex is-align-items-end">
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': toggle }" style="letter-spacing: -0.04em;">$59</h3>
              <h3 class="is-size-2 has-text-dark" :class="{ 'is-hidden': !toggle }" style="letter-spacing: -0.04em;">$699</h3>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': toggle }">/month</span>
              <span class="mb-2 ml-2 is-size-6 has-text-grey" :class="{ 'is-hidden': !toggle }">/yearly</span>
            </div>
            <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>
            <ul>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Goal setting with OKRs</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">OKR chart view</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Naming customization</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Jira &amp; Salesforce Integration</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Data insights</span>
              </li>
              <li class="is-flex is-align-items-center mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">Enterprise-grade security</span>
              </li>
              <li class="is-flex is-align-items-center">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg>
                <span class="ml-4 has-text-dark">iOS &amp; Android apps</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing from asitrastudio

Bootstrap

asitrastudio

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mw-md mw-lg-none mx-auto">
      <div class="mw-3xl mb-20">
        <h1 >Premium Membership</h1>
      </div>
      <div class="d-flex mb-10 align-items-center"><span class="fs-6 fs-medium" >Billed monthly</span>
        <div class="d-inline-flex mx-4 mx-lg-8 bg-dark rounded-pill" style="padding: 2px;">
          <button class="btn p-0 bg-white" style="width: 26px; height: 26px;"></button>
          <button class="btn p-0 bg-transparent" style="width: 26px; height: 26px;"></button>
        </div>
        <div class="d-md-inline-flex align-items-center"><span class="d-inline-block me-3 fs-6 fs-medium text-light-dark" >Billed yearly</span><span class="d-inline-block py-1 px-3 fs-10 fw-semibold border border-dark rounded-pill" >
            20%
            SAVE</span></div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-4 mb-5 mb-lg-0">
          <div class="h-100 pt-10 pb-10 px-8 border rounded-5"><span class="d-block mb-2 fs-6 fw-semibold" >Starter plan</span>
            <h3 class="fs-1 fw-medium mb-4" >Free</h3>
            <p class="text-secondary-light mb-8" >
              During this phase the design is developed to meet the required technical
              standards to
            </p><a class="btn w-100 mb-16 btn-outline-dark" href="#" >Get started</a>
            <ul class="list-unstyled mb-0">
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Core engagement survey</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Topic-based assessments</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Custom topic-based assessments</span>
              </li>
              <li>
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Filterable heatmap &amp; analytics</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-5 mb-lg-0">
          <div class="position-relative h-100 pt-10 pb-10 px-8 border rounded-5 overflow-hidden"><img class="position-absolute top-0 end-0" src="asitrastudio-assets/pricing/shadow-blue.png" alt=""/><span class="d-block mb-2 fs-6 fw-semibold" >Basic plan</span>
            <div class="d-flex mb-4 align-items-end">
              <h3 class="fs-1 fw-medium mb-0" >$29</h3><span class="ms-2 fs-7 text-light-dark" >/month</span>
            </div>
            <p class="text-secondary-light mb-8" >
              During this phase the design is developed to meet the required technical
              standards to
            </p><a class="btn w-100 mb-16 btn-primary" href="#" >Get started</a>
            <ul class="list-unstyled mb-0">
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Performance reviews</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >360&ordm; feedback</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Competencies</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Calibration</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Talent Matrix</span>
              </li>
              <li>
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Career Paths &amp; Plans</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="h-100 pt-10 pb-10 px-8 border rounded-5"><span class="d-block mb-2 fs-6 fw-semibold" >Starter plan</span>
            <div class="d-flex mb-4 align-items-end">
              <h3 class="fs-1 fw-medium mb-0" >$59</h3><span class="ms-2 fs-7 text-light-dark" >/month</span>
            </div>
            <p class="text-secondary-light mb-8" >
              During this phase the design is developed to meet the required technical
              standards to
            </p><a class="btn w-100 mb-16 btn-outline-dark" href="#" >Get started</a>
            <ul class="list-unstyled mb-0">
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Goal setting with OKRs</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >OKR chart view</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Naming customization</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Jira &amp; Salesforce Integration</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Data insights</span>
              </li>
              <li class="mb-4">
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >Enterprise-grade security</span>
              </li>
              <li>
                <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect y="0.5" width="21" height="21" rx="10.5" fill="black"></rect>
                  <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
                </svg><span class="ms-4 fw-medium" >iOS &amp; Android apps</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Components by Shuffle

Choose from 15 variations of Pricing UI components. Presented here are variants available in Asitrastudio library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Pricing UI components, code and our visual editor. Try the demo for free!

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Pricing Components in Asitrastudio library

Framework

UI Library

Components

Pricing from asitrastudio

Pricing from asitrastudio

Pricing from asitrastudio

Pricing Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Pricing Components in Asitrastudio library

Framework

UI Library

Components

Pricing from asitrastudio

Pricing from asitrastudio

Pricing from asitrastudio

Pricing Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company