;
<div class="flex w-full max-w-screen-xl justify-center flex-wrap gap-4 px-3">
<div class="p-10 flex flex-col gap-10 max-sm:basis-full basis-[18rem] shrink-0 grow justify-between rounded-xl border border-zinc-300 text-black dark:text-white dark:border-zinc-800 lg:max-w-[23rem]">
<div class="flex flex-col gap-2">
<h2 class="font-bold text-xl">Basic</h2>
<p class="font-bold text-4xl">$0</p>
<span class="text-sm text-black/70 dark:text-white/70">Personal use and student</span>
</div>
<div class="grid gap-4">
<div class="grid grid-cols-[auto_1fr] gap-1.5 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Deploy from CLI or personal git integrations </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
</div>
<button
class="dark:bg-black dark:border-white dark:hover:bg-white dark:hover:text-black bg-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:border-black border-black focus-visible:outline-black/50 px-5 py-2 rounded border-[1.5px] transition-colors duration-100 focus-visible:outline">
Get Started
</button>
</div>
<div
class="p-10 flex flex-col gap-10 max-sm:basis-full basis-[18rem] shrink-0 grow justify-between rounded-xl border-2 border-zinc-300 text-black dark:text-white dark:border-zinc-700 lg:max-w-[23rem]">
<div class="flex flex-col gap-2">
<h2 class="font-bold text-xl">Pro</h2>
<p class="font-bold text-4xl">$10</p>
<span class="text-sm text-black/70 dark:text-white/70">For team collaboration</span>
</div>
<div class="grid gap-4">
<div class="grid grid-cols-[auto_1fr] gap-1.5 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70">
Access to discord community Lorem ipsum dolor sit amet.
</span>
</div>
</div>
<button
class="bg-black dark:bg-white dark:text-black text-white focus-visible:outline-black/40 px-5 py-2.5 rounded focus-visible:outline flex justify-between items-center group">
Start a free trial
<span class="ml-1 translate-y-[0.15rem] group-hover:translate-x-1 transition-transform w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </span>
</button>
</div>
<div
class="p-10 flex flex-col gap-10 max-sm:basis-full basis-[18rem] shrink-0 grow justify-between rounded-xl border border-zinc-300 text-black dark:text-white dark:border-zinc-800 lg:max-w-[23rem]">
<div class="flex flex-col gap-2">
<h2 class="font-bold text-xl">Pro Plus</h2>
<p class="font-bold text-4xl">$50</p>
<span class="text-sm text-black/70 dark:text-white/70">Enterprise and Advanced features</span>
</div>
<div class="grid gap-4">
<div class="grid grid-cols-[auto_1fr] gap-1.5 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
<div class="grid grid-cols-[auto_1fr] gap-2 items-center">
<!-- CHECK ICON -->
<span class="pr-1 mb-auto" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> </span>
<span class="text-sm text-black/70 dark:text-white/70"> Access to discord community </span>
</div>
</div>
<button
class="dark:bg-black dark:border-white dark:hover:bg-white dark:hover:text-black bg-white text-black dark:text-white hover:bg-black hover:text-white dark:hover:border-black border-black focus-visible:outline-black/50 px-5 py-2 rounded border-[1.5px] transition-colors duration-100 focus-visible:outline">
Get Pro Plus
</button>
</div>
</div>