<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 border border-gray-200 dark:border-gray-700">
        <div class="text-sm font-semibold text-gray-500 uppercase mb-4">Starter</div>
        <div class="text-5xl font-bold text-gray-900 dark:text-white mb-6">$0<span class="text-base font-normal text-gray-500">/mo</span></div>
        <a href="#" class="block w-full py-2.5 text-center border rounded-xl hover:bg-gray-50 transition">Get Started</a>
    </div>

    
    <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl shadow-xl p-8 ring-2 ring-blue-500">
        <div class="text-sm font-semibold text-blue-200 uppercase mb-4">Pro</div>
        <div class="text-5xl font-bold text-white mb-6">$29<span class="text-base font-normal text-blue-200">/mo</span></div>
        <a href="#" class="block w-full py-2.5 text-center bg-white text-blue-700 font-semibold rounded-xl">Get Started</a>
    </div>
</div>