Pricing Components in Flaro library

<section class="relative py-36 bg-blueGray-50 overflow-hidden">
  <img class="absolute top-1/2 right-0 transform -translate-y-1/2" src="flaro-assets/images/pricing/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="mb-16 lg:mb-52 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Pick a plan</h2>
          <h3 class="mb-6 text-lg text-gray-900 font-semibold leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
          <p class="font-medium text-gray-600 leading-relaxed">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>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md mx-auto overflow-hidden rounded-3xl shadow-8xl">
          <div class="p-9">
            <span class="mb-7 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Features included:</span>
            <ul>
              <li class="mb-4 flex items-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="font-semibold leading-normal">3 Team Members</p>
              </li>
              <li class="mb-4 flex items-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="font-semibold leading-normal">1200+ UI Blocks</p>
              </li>
              <li class="mb-4 flex items-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="font-semibold leading-normal">10 GB Cloud Storage</p>
              </li>
              <li class="mb-4 flex items-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="font-semibold leading-normal">Individual Email Account</p>
              </li>
              <li class="flex items-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="font-semibold leading-normal">Premium Support</p>
              </li>
            </ul>
          </div>
          <div class="p-9 bg-white">
            <div class="flex flex-wrap -m-8">
              <div class="w-full sm:w-1/2 p-8">
                <span class="mb-2 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Pro Package</span>
                <p class="text-gray-900 font-semibold leading-normal">Best for Startups &amp; Small Businesses</p>
              </div>
              <div class="w-full sm:w-1/2 p-8">
                <div class="sm:max-w-max ml-auto">
                  <p class="font-bold">
                    <span class="text-5xl leading-tight tracking-px-n">$49</span>
                    <span class="text-lg text-gray-500 leading-snug tracking-px-n">/mo</span>
                  </p>
                  <p class="font-medium text-gray-500 leading-relaxed">Billed anually</p>
                </div>
              </div>
            </div>
            <div class="mt-9">
              <button class="py-4 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Start 14 days free trial</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>