<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 via-purple-900 to-violet-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="bg-gradient-to-t from-gray-900 via-purple-900 to-violet-600 rounded-full p-2"> <ion-icon name="logo-amplify" class="text-5xl "></ion-icon> </div> <div class="text-3xl m-2 ">Personal</div> <div class="text-white text-sm my-2 flex flex-col items-center h-60"> <div class="flex justify-center my-3 text-white 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.78</div> </div> <div classcon name="checkmark-sharp"> <div class="">1 website</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">50 GB Storage</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">Unlimited Databases</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">~100,000 Visits Monthly</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">SSL</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">Daily Backups</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">Free E-mail</div> </div> </div> </div> </div> <div class="bg-gradient-to-bl from-slate-900 via-purple-900 to-slate-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="bg-gradient-to-bl from-slate-900 via-purple-900 to-slate-900 rounded-full p-2"> <ion-icon name="logo-octocat" class="text-5xl "></ion-icon> </div> <div class="text-3xl m-2 ">Shared</div> <div class="text-white text-sm my-2 flex flex-col items-center h-60"> <div class="flex justify-center my-3 text-white 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.78</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">100 websites</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">500 GB Storage</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">Unlimited Databases</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">~100,000 Visits Monthly</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">SSL</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">Daily Backups</div> </div> <div class="flex"> <ion-icon name="close-sharp"> </ion-icon> <div class="">Free E-mail</div> </div> </div> </div> </div> <div class="bg-gradient-to-br from-gray-400 via-gray-900 to-blue-800 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="bg-gradient-to-br from-gray-400 via-gray-900 to-blue-800 rounded-full p-2"> <ion-icon name="logo-gitlab" class="text-5xl "></ion-icon> </div> <div class="text-3xl m-2 ">Business</div> <div class="text-white text-sm my-2 flex flex-col items-center h-60"> <div class="flex justify-center my-3 text-white 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.78</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">100 websites</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">500 GB Storage</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">Unlimited Databases</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">~100,000 Visits Monthly</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">SSL</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">Daily Backups</div> </div> <div class="flex"> <ion-icon name="checkmark-sharp"> </ion-icon> <div class="">Free E-mail</div> </div> </div> </div> </div> </div> </div> <script src="https://cdn.tailwindcss.com"></script> <script src="https://use.fontawesome.com/03f8a0ebd4.js"></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>