<section>
<div class="container py-24">
<div class="max-w-2xl px-4 py-24 mx-auto sm:px-6 lg:px-8">
<div
class="justify-center mx-auto space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:mx-auto xl:max-w-2xl xl:mx-0 xl:grid-cols-2">
<div class="bg-gray-50 rounded-xl">
<div class="p-6 text-center">
<h2 class="text-lg font-medium leading-6 text-gray-600">Basic</h2>
<p class="mt-8 text-4xl">
<span class="font-black text-blue-600 uppercase">free</span>
<span class="font-medium text-gray-500">/mo</span>
</p>
<span class="text-xs text-gray-600">No credit card required</span>
<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
Hobby</a>
</div>
</div>
</div>
<div class="bg-white rounded-xl">
<div class="p-6 text-center">
<h2 class="text-lg font-medium leading-6 text-gray-600">Premium</h2>
<p class="mt-8 text-4xl">
<span class="font-black text-gray-500 uppercase">$29.99</span>
<span class="font-medium text-gray-500">/mo</span>
</p>
<span class="text-xs text-gray-600">No credit card required</span>
<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 $29.99</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
