<body class="bg-slate-50 font-sans leading-normal tracking-normal"> <main class="relative min-h-screen flex flex-col justify-center overflow-hidden"> <div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24"> <!-- Pricing table component --> <div> <!-- Pricing toggle --> <div class="flex justify-center max-w-[14rem] m-auto mb-8 lg:mb-16"> <div class="relative flex w-full p-1 bg-white rounded-full"> <span class="absolute inset-0 m-1 pointer-events-none" aria-hidden="true"> <span class="absolute inset-0 w-1/2 bg-indigo-500 rounded-full shadow-sm shadow-indigo-950/10 transform transition-transform duration-150 ease-in-out"></span> </span> <button class="relative w-1/2 py-2 text-sm font-medium text-indigo-700 rounded-full focus:outline-none" aria-pressed="true"> Annual </button> <button class="relative w-1/2 py-2 text-sm font-medium text-gray-500 rounded-full hover:text-indigo-700 focus:outline-none" aria-pressed="false"> Monthly </button> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white rounded-lg shadow-lg p-6"> <h2 class="text-xl font-bold mb-4">Basic Plan</h2> <p class="text-gray-600 mb-4">Perfect for individuals.</p> <p class="text-2xl font-bold mb-4">$10/month</p> <button class="w-full bg-indigo-500 text-white py-2 rounded hover:bg-indigo-400">Select</button> </div> <div class="bg-white rounded-lg shadow-lg p-6"> <h2 class="text-xl font-bold mb-4">Pro Plan</h2> <p class="text-gray-600 mb-4">Great for small teams.</p> <p class="text-2xl font-bold mb-4">$20/month</p> <button class="w-full bg-indigo-500 text-white py-2 rounded hover:bg-indigo-400">Select</button> </div> <div class="bg-white rounded-lg shadow-lg p-6"> <h2 class="text-xl font-bold mb-4">Enterprise Plan</h2> <p class="text-gray-600 mb-4">Best for large organizations.</p> <p class="text-2xl font-bold mb-4">$50/month</p> <button class="w-full bg-indigo-500 text-white py-2 rounded hover:bg-indigo-400">Select</button> </div> </div> </div> </div> </main> </body>
v