<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-2xl bg-white w-full max-w-2xl overflow-hidden p-8">
<h1 class="text-2xl font-semibold">Choose a pricing plan</h1>
<p class="text text-gray-400 mb-6">Select the plan that suites your usage, from fixed monthly plans to flexible pay-per-use plans</p>
<ul class="grid grid-cols-2 gap-4">
<li class="rounded-2xl border-2 p-6 flex flex-col">
<div class="flex items-center mb-6">
<div class="bg-yellow-200 inline-block w-12 h-12 p-3 text-center rounded-lg text-lg text-yellow-600 row-span-2">$</div>
<div class="ml-4">
<h2 class="text-lg font-semibold">Personal</h2>
<p>$<span class="text-2xl mx-1 font-bold">14</span>/ per month</p>
</div>
</div>
<ul class="list-disc ml-4 mb-4">
<li class="my-1">Suited for individuals</li>
<li class="my-1">Unlimited projects</li>
<li class="my-1">Free up to 3000 minutes</li>
</ul><button class="text-center mt-4 p-4 block w-full bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors mt-auto">Choose Plan</button>
</li>
<li class="rounded-2xl border-2 p-6 flex flex-col">
<div class="flex items-center mb-6">
<div class="bg-yellow-200 inline-block w-12 h-12 p-3 text-center rounded-lg text-lg text-yellow-600 row-span-2">$$</div>
<div class="ml-4">
<h2 class="text-lg font-semibold">Enterprise</h2>
<p>$<span class="text-2xl mx-1 font-bold">49</span>/ per month</p>
</div>
</div>
<ul class="list-disc ml-4 mb-4">
<li class="my-1">Suited for companies</li>
<li class="my-1">Unlimited projects & workspaces</li>
<li class="my-1">No time limit</li>
<li class="my-1">Multiple user management</li>
</ul><button class="text-center mt-4 p-4 block w-full bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors mt-auto">Choose Plan</button>
</li>
</ul>
</div>
</div>