pricing8

<section>
  <div class="container py-24">
    <div class="grid grid-cols-1 gap-12 text-center lg:gap-24 lg:grid-cols-2">
      <div>
        <div
          class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 ml-auto text-gray-600 rounded-full bg-gray-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon icon-tabler icon-tabler-aperture" width="24"
            height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0span4v24H0z" fill="none"></path>
            <circle cx="12" cy="12" r="9"></circle>
            <line x1="3.6" y1="15" x2="14.15" y2="15"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(72 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(144 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(216 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(288 12 12)"></line>
          </svg>
        </div>
        <div class="p-12 mx-auto">
          <span class="mx-auto text-2xl font-semibold leading-none tracking-tighter text-gray-600 lg:text-3xl"> Short
            length headline. </span>
          <p class="mx-auto my-12 text-base text-gray-500 lading-relaxed">Free and Premium themes, UI Kit's, templates
            and landing pages built with Tailwind CSS, HTML & Next.js.</p>
          <span class="text-xs font-semibold tracking-widest text-blue-600 uppercase"> explain something here </span>

          <strong
            class="flex items-end justify-center mx-auto mt-8 text-3xl font-black leading-none text-center text-gray-500 lg:text-4xl">
            $10
            <span class="text-sm"> /mo </span>
          </strong>
          <div class="mt-6">
            <a href="#"
              class="w-full items-center block px-10 py-3.5 text-base font-medium text-center text-blue-600 transition duration-500 ease-in-out transform border-2 border-white shadow-md rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Buy
              for $10</a>
          </div>
        </div>
      </div>
      <div>
        <div
          class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 ml-auto text-gray-600 rounded-full bg-gray-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon icon-tabler icon-tabler-aperture" width="24"
            height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0span4v24H0z" fill="none"></path>
            <circle cx="12" cy="12" r="9"></circle>
            <line x1="3.6" y1="15" x2="14.15" y2="15"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(72 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(144 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(216 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(288 12 12)"></line>
          </svg>
        </div>
        <div class="p-12 mx-auto">
          <span class="mx-auto text-2xl font-semibold leading-none tracking-tighter text-gray-600 lg:text-3xl"> Short
            length headline. </span>
          <p class="mx-auto my-12 text-base text-gray-500 lading-relaxed">Free and Premium themes, UI Kit's, templates
            and landing pages built with Tailwind CSS, HTML & Next.js.</p>
          <span class="mb-8 text-xs font-semibold tracking-widest text-blue-600 uppercase"> explain something here
          </span>

          <strong
            class="flex items-end justify-center mx-auto mt-8 text-3xl font-black leading-none text-center text-gray-500 lg:text-4xl">
            $50
            <span class="text-sm"> /mo </span>
          </strong>
          <div class="mt-6">
            <a href="#"
              class="flex items-center justify-center w-full px-10 py-4 text-base font-medium text-center text-white transition duration-500 ease-in-out transform bg-blue-600 rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Buy
              for $50</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>