Pricing Components in Suncealand library

<section class="py-20 md:py-36 bg-black">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-32">
      <div class="inline-flex items-center mb-12">
        <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
        <span class="uppercase text-sm text-gray-100 font-medium tracking-tight">PRICING</span>
      </div>
      <h1 class="text-5xl sm:text-7xl xl:text-8xl font-heading font-semibold text-white">Choose the plan</h1>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-8 xl:mb-0">
        <div class="max-w-md xl:max-w-none mx-auto px-8 py-24 bg-gray-900 rounded-4xl border-2 border-gray-600">
          <div class="max-w-2xs mx-auto text-center">
            <div class="inline-flex px-5 py-2 items-center border border-gray-300 rounded-full mb-5">
              <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
              <span class="text-sm text-white font-medium">Free</span>
            </div>
            <h3 class="text-xl text-gray-200 mb-10">Free 20 days trial</h3>
            <div class="flex mb-5 justify-center items-center">
              <span class="mr-1 font-heading text-5xl text-white">$</span>
              <span class="font-heading text-10xl text-white">8</span>
            </div>
            <span class="block mb-14 text-gray-200">per month</span>
            <a class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-gray-900 border-2 border-white rounded">
                  <span class="text-base font-semibold text-white uppercase">Try it</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4 mb-8 xl:mb-0">
        <div class="max-w-md xl:max-w-none mx-auto px-8 py-24 bg-purple-900 bg-opacity-20 rounded-4xl border-2 border-purple-900">
          <div class="max-w-2xs mx-auto text-center">
            <div class="inline-flex px-5 py-2 items-center border border-gray-300 rounded-full mb-5">
              <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
              <span class="text-sm text-white font-medium">Business</span>
            </div>
            <h3 class="text-xl text-gray-200 mb-10">For small business</h3>
            <div class="flex mb-5 justify-center items-center">
              <span class="mr-1 font-heading text-5xl text-white">$</span>
              <span class="font-heading text-10xl text-white">34</span>
            </div>
            <span class="block mb-14 text-gray-200">per month</span>
            <a class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-gray-900 border-2 border-white rounded">
                  <span class="text-base font-semibold text-white uppercase">Try it</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4">
        <div class="max-w-md xl:max-w-none mx-auto px-8 py-24 bg-gray-900 rounded-4xl border-2 border-gray-600">
          <div class="max-w-2xs mx-auto text-center">
            <div class="inline-flex px-5 py-2 items-center border border-gray-300 rounded-full mb-5">
              <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
              <span class="text-sm text-white font-medium">Business Plus</span>
            </div>
            <h3 class="text-xl text-gray-200 mb-10">For biggest business</h3>
            <div class="flex mb-5 justify-center items-center">
              <span class="mr-1 font-heading text-5xl text-white">$</span>
              <span class="font-heading text-10xl text-white">85</span>
            </div>
            <span class="block mb-14 text-gray-200">per month</span>
            <a class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-gray-900 border-2 border-white rounded">
                  <span class="text-base font-semibold text-white uppercase">Try it</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>