<section class="py-24 lg:pb-36 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap items-center justify-between -m-2 mb-8">
<div class="w-auto p-2">
<h3 class="text-3xl font-semibold" style="letter-spacing: -0.5px;">Save 10% when you choose Annual Billing:</h3>
</div>
<div class="w-auto p-2">
<a class="flex p-2 border border-gray-300 rounded-full" href="#">
<span class="inline-block px-6 py-2.5 text-white font-medium tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-full transition duration-500">Annual</span>
<span class="px-6 py-2.5 font-medium tracking-tight rounded-full">Annual</span>
</a>
</div>
</div>
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="p-10 bg-gray-200 rounded-t-lg">
<h4 class="mb-2 text-xl font-semibold tracking-tight">Basic</h4>
<p class="text-xl tracking-tight">Use and re-use tons of responsive sections to main & create the perfect layout.</p>
</div>
<div class="relative px-10 bg-gray-500 rounded-b-lg">
<div class="flex flex-wrap justify-between items-center py-1">
<div class="w-auto p-2">
<h3 class="text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$49/mo</h3>
</div>
<div class="w-auto p-2">
<p class="text-white font-medium tracking-tight">Billed Yearly</p>
</div>
</div>
</div>
<div class="pt-4 px-10 pb-11 border-l border-r border-b rounded-b-lg">
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Users</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Bandwidth</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">8GB Per User</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Requests</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20,000 Per Month</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">API Calls</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">50k</p>
</div>
</div>
</div>
<div class="mb-8 py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Unique Features</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">Unlimited</p>
</div>
</div>
</div>
<a class="inline-block px-5 py-4 w-full text-center hover:text-white font-semibold tracking-tight bg-white hover:bg-gray-700 border border-gray-700 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="p-10 bg-gray-600 rounded-t-lg">
<h4 class="mb-2 text-xl text-white font-semibold tracking-tight">Pro</h4>
<p class="text-xl text-white tracking-tight">Use and re-use tons of responsive sections to main & create the perfect layout.</p>
</div>
<div class="relative px-10 rounded-b-lg" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
<div class="flex flex-wrap justify-between items-center py-1">
<div class="w-auto p-2">
<h3 class="text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$99/mo</h3>
</div>
<div class="w-auto p-2">
<p class="text-white font-medium tracking-tight">Billed Yearly</p>
</div>
</div>
</div>
<div class="pt-4 px-10 pb-11 border-l border-r border-b rounded-b-lg">
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Users</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Bandwidth</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">8GB Per User</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Requests</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">20,000 Per Month</p>
</div>
</div>
</div>
<div class="py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">API Calls</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">50k</p>
</div>
</div>
</div>
<div class="mb-8 py-5 border-b border-gray-200">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<p class="text-gray-600 tracking-tight">Unique Features</p>
</div>
<div class="w-auto p-2">
<p class="font-medium tracking-tight">Unlimited</p>
</div>
</div>
</div>
<a class="inline-block px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
</div>
</div>
</div>
</div>
</section>