Tailwind Pricing Components in Bendis library

<section class="relative py-24 bg-blue-800" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-8 mb-6 text-4xl font-bold font-heading text-white">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-8 text-xl text-gray-50">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="max-w-max mx-auto flex flex-row">
        <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="px-8 py-2 leading-8 bg-white font-semibold text-blue-800" :class="{ 'bg-white font-semibold text-blue-800': tab == $refs.tab1.textContent, 'bg-blue-900 text-blue-100 hover:text-blue-200': tab != $refs.tab1.textContent }">Active demo</button>
        <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="px-8 py-2 leading-8 bg-blue-900 text-blue-100 hover:text-blue-200" :class="{ 'bg-white font-semibold text-blue-800': tab == $refs.tab2.textContent, 'bg-blue-900 text-blue-100 hover:text-blue-200': tab != $refs.tab2.textContent }">Normal Tab</button>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-900 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-700 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Starter</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$34</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-white uppercase font-bold leading-normal border-2 border-white hover:bg-blue-800 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-700 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-900 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Pro</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$65</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-900 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-700 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Premium</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$99</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-white uppercase font-bold leading-normal border-2 border-white hover:bg-blue-800 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
    </div>
  </div>
</section>