<div class="flex justify-center"> <div class=" flex md:flex-row flex-col px-4 py-2 my-10 gap-y-7 gap-x-7 max-w-7xl "> <div class="bg-gradient-to-t from-gray-900 to-gray-600 border border-gray-200 rounded-xl drop-shadow-md shadow-current p-5 h-auto w-[300px] hover:shadow-lg hover:transform hover:scale-105 duration-500 ease-in-out "> <div class="flex flex-col justify-center items-center text-white p-2 "> <div class="text-3xl ">Mover</div> <div class="flex justify-center my-3 font-medium md:tracking-tighter "> <div class="text-2xl md:text-3xl mt-[3px] md:mt-[1px]">£</div> <div class="text-3xl md:text-5xl">6.99</div> <div class="text-lg md:text-xl mt-[9px] md:mt-[20px]">/mo</div> </div> <div class="px-8 py-1 rounded-3xl font-medium bg-white text-stone-900 hover:bg-gray-100 cursor-pointer"><a href=''>Order Now</a></div> <div class="text-white text-sm my-4 border-t border-white flex flex-col justify-center items-center h-60"> <div class="m-1">All basic features</div> <div class="m-1">Drip course content</div> </div> </div> </div> <div class="bg-gradient-to-b from-orange-500 to-yellow-500 border border-gray-200 rounded-xl drop-shadow-md shadow-current p-5 h-auto w-[300px] hover:shadow-lg hover:transform hover:scale-105 duration-500 ease-in-out "> <div class="flex flex-col justify-center items-center text-white p-2 "> <div class="text-3xl ">Shaker</div> <div class="flex justify-center my-3 font-medium md:tracking-tighter "> <div class="text-2xl md:text-3xl mt-[3px] md:mt-[1px]">£</div> <div class="text-3xl md:text-5xl">9.99</div> <div class="text-lg md:text-xl mt-[9px] md:mt-[20px]">/mo</div> </div> <div class="px-8 py-1 rounded-3xl font-medium bg-white text-stone-900 hover:bg-gray-100 cursor-pointer"><a href=''>Order Now</a></div> <div class="text-white text-sm my-4 border-t border-white flex flex-col justify-center items-center h-60"> <div class="m-1">All basic features</div> <div class="m-1">Advanced tracking</div> <div class="m-1">Onboarding + Migration assistance</div> <div class="m-1">Drip course content</div> <div class="m-1">Affiliates</div> </div> </div> </div> <div class="bg-gradient-to-br from-blue-700 via-blue-800 to-gray-900 border border-gray-200 rounded-xl drop-shadow-md shadow-current p-5 h-auto w-[300px] hover:shadow-lg hover:transform hover:scale-105 duration-500 ease-in-out "> <div class="flex flex-col justify-center items-center text-white p-2 "> <div class="text-3xl ">Earthquaker</div> <div class="flex justify-center my-3 font-medium md:tracking-tighter "> <div class="text-2xl md:text-3xl mt-[3px] md:mt-[1px]">£</div> <div class="text-3xl md:text-5xl">9.99</div> <div class="text-lg md:text-xl mt-[9px] md:mt-[20px]">/mo</div> </div> <div class="px-8 py-1 rounded-3xl font-medium bg-white text-stone-900 hover:bg-gray-100 cursor-pointer"><a href=''>Order Now</a></div> <div class="text-white text-sm my-4 border-t border-white flex flex-col justify-center items-center h-60"> <div class="m-1">All basic features</div> <div class="m-1">Advanced tracking</div> <div class="m-1">Onboarding + Migration assistance</div> <div class="m-1">Drip course content</div> <div class="m-1">Affiliates</div> <div class="m-1">Multiple Payments</div> <div class="m-1">ACH payments</div> <div class="m-1">Team Licenses</div> </div> </div> </div> </div> </div> <script src="https://cdn.tailwindcss.com"></script>