Pricing Card with Tabs Using Tailwind UI

<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/15555725-Pricing-Card-UI-Design  -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<section class="bg-[#4D46A6] pt-32 sm:pt-0">

  <div class="flex items-center justify-center sm:min-h-screen ">
    <div class="">

      <div class="flex flex-row pt-4">

        <div
          class="p-8 text-white transform scale-125 bg-gray-900 border-4 border-white shadow-xl w-80 text-start rounded-3xl">
          <ul class="flex p-1 mb-8 text-xs text-center text-gray-500 bg-gray-100 rounded-lg">
            <li class="w-[calc(100%/3)]">
              <a href="#" class="flex justify-center py-2.5">Basic</a>
            </li>
            <li class="w-[calc(100%/3)]">
              <a href="#" class="flex justify-center bg-[#46A69A] rounded-lg shadow text-white py-2.5">Standart
              </a>
            </li>
            <li class="w-[calc(100%/3)]">
              <a href="#" class="flex justify-center py-2.5">Premium
              </a>
            </li>
          </ul>

          <div class="flex items-end justify-between">
            <div>
              <p class="pt-2 text-sm tracking-wide">
                Standart
              </p>
              <h1 class="text-2xl font-semibold text-white">Icon sets</h1>
            </div>
            <span class="">$120</span>
          </div>

          <p class="pt-8 text-sm text-start">Up to 10 creative & professional icons + two
            color versions/themes.</p>

          <div class="pt-4">

            <p class="flex items-center text-xs text-left text-gray-400 ">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-4 h-4 mr-2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>

              Included source files
            </p>
            <p class="flex items-center pt-2 text-xs text-left text-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-4 h-4 mr-2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>

              Converted to responsive components
            </p>

            <a href="#" class="text-center">
              <p class="w-full text-sm py-2.5 bg-[#4D46A6] mt-8 rounded-xl text-white">
                Add to cart
              </p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>