<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="space-y-5 px-8 py-12">
<div class="container flex space-x-2">
<div class="no-scrollbar overflow-hidden">
<div class="flex no-scrollbar justify-start space-x-6 items-center overflow-x-auto">
<button
class="font-semibold whitespace-nowrap text-base text-gray-500 hover:text-gray-600 transition-colors duration-300">Monthly</button><button
class="font-semibold whitespace-nowrap text-base hover:text-gray-600 transition-colors duration-300 text-gray-900">Annually</button>
</div>
</div><button class="text-purple-500 font-semibold text-base">(2 months free)</button>
</div>
<div class="demo-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
<div
class="rounded-[30px] md:rounded-[36px] bg-[#FAFAFA] overflow-hidden border-[1px] border-gray-200 p-8 relative">
<div class="h-full">
<div class="h-full z-10 relative">
<div class="flex flex-col flex-1 justify-between h-full space-y-5">
<div class="flex justify-between flex-col">
<div class="text-xl md:text-2xl font-bold text-gray-900 flex justify-between">
<span>Starter</span>
</div>
<div class="pt-5 text-gray-500 font-medium text-base space-y-1">
<div class="flex items-center align-bottom"><span class="pt-1.5">$</span>
<div class="ml-1 mr-2 text-2xl md:text-3xl font-bold text-gray-900">
<span>10</span>
</div><span class="pt-1.5">per month</span>
</div>
<div class="text-base">billed
annually
</div>
</div>
<div class="">
<ul class="space-y-2 pt-8">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Everything in Free</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>5,000 events / month</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Unlimited seats</span>
</li>
</ul>
</div>
</div>
<div class="pt-2">
<a href="/billing" type="button" target="_blank"
class="appearance-none inline-flex hover:shadow-2xl transition-all duration-300 hover:scale-105 items-center group space-x-2.5 bg-black text-white py-4 px-5 rounded-2xl cursor-pointer"><span
class="w-full font-semibold text-base">Choose Starter</span>
<svg class="inline-block h-6" viewBox="0 0 24 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.4999H21L14 19.4999M14 5.5L18 9.5" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="hidden">
<ul class="space-y-2 pt-8">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Everything in Free</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>5,000 events / month</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Unlimited seats</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="rounded-[30px] md:rounded-[36px] bg-[#FAFAFA] overflow-hidden border-[1px] border-gray-200 p-8 relative">
<div class="h-full">
<div class="h-full z-10 relative">
<div class="flex flex-col flex-1 justify-between h-full space-y-5">
<div class="flex justify-between flex-col">
<div class="text-xl md:text-2xl font-bold text-gray-900 flex justify-between">
<span>Startup</span>
<svg class="h-6 w-6 animate-ping-slow text-gray-500" viewBox="0 0 50 50" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M30.5 25C30.5 28.0376 28.0376 30.5 25 30.5C21.9624 30.5 19.5 28.0376 19.5 25C19.5 21.9624 21.9624 19.5 25 19.5C28.0376 19.5 30.5 21.9624 30.5 25Z"
stroke="currentColor" stroke-opacity="0.7" stroke-width="4"
stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M38.75 25C38.75 32.5939 32.5939 38.75 25 38.75C17.4061 38.75 11.25 32.5939 11.25 25C11.25 17.4061 17.4061 11.25 25 11.25C32.5939 11.25 38.75 17.4061 38.75 25Z"
stroke="currentColor" stroke-opacity="0.4" stroke-width="4.5"
stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M47.5 25C47.5 37.4264 37.4264 47.5 25 47.5C12.5736 47.5 2.5 37.4264 2.5 25C2.5 12.5736 12.5736 2.5 25 2.5C37.4264 2.5 47.5 12.5736 47.5 25Z"
stroke="currentColor" stroke-opacity="0.1" stroke-width="5"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="pt-5 text-gray-500 font-medium text-base space-y-1">
<div class="flex items-center align-bottom"><span class="pt-1.5">$</span>
<div class="ml-1 mr-2 text-2xl md:text-3xl font-bold text-gray-900">
<span>16</span>
</div><span class="pt-1.5">per month</span>
</div>
<div class="text-base">billed
annually
</div>
</div>
<div class="">
<ul class="space-y-2 pt-8">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Everything in Starter</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>20,000 events / month</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Unlimited seats</span>
</li>
</ul>
</div>
</div>
<div class="pt-2">
<a href="/billing" type="button" target="_blank"
class="appearance-none inline-flex hover:shadow-2xl transition-all duration-300 hover:scale-105 items-center group space-x-2.5 bg-black text-white py-4 px-5 rounded-2xl cursor-pointer"><span
class="w-full font-semibold text-base">Choose Startup</span>
<svg class="inline-block h-6" viewBox="0 0 24 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.4999H21L14 19.4999M14 5.5L18 9.5" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="hidden">
<ul class="space-y-2 pt-8">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Everything in Starter</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>20,000 events / month</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Unlimited seats</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="rounded-[30px] md:rounded-[36px] bg-[#FAFAFA] overflow-hidden border-[1px] border-gray-200 p-8 relative">
<div class="h-full">
<div class="h-full z-10 relative">
<div class="flex flex-col flex-1 justify-between h-full space-y-5">
<div class="flex justify-between flex-col">
<div class="text-xl md:text-2xl font-bold text-gray-900 flex justify-between">
<span>Professional</span>
</div>
<div class="pt-5 text-gray-500 font-medium text-base space-y-1">
<div class="flex items-center align-bottom"><span class="pt-1.5">$</span>
<div class="ml-1 mr-2 text-2xl md:text-3xl font-bold text-gray-900">
<span>49</span>
</div><span class="pt-1.5">per month</span>
</div>
<div class="text-base">billed
annually
</div>
</div>
<div class="">
<ul class="space-y-2 pt-8">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Everything in Startup</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>80,000 events / mo</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Unlimited seats</span>
</li>
</ul>
</div>
</div>
<div class="pt-2">
<a href="/billing" type="button" target="_blank"
class="appearance-none inline-flex hover:shadow-2xl transition-all duration-300 hover:scale-105 items-center group space-x-2.5 bg-black text-white py-4 px-5 rounded-2xl cursor-pointer"><span
class="w-full font-semibold text-base">Choose Pro</span>
<svg class="inline-block h-6" viewBox="0 0 24 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.4999H21L14 19.4999M14 5.5L18 9.5" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="hidden">
<ul class="space-y-2 pt-8">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Everything in Startup</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>80,000 events / mo</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Unlimited seats</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="rounded-[30px] md:rounded-[36px] bg-[#FAFAFA] overflow-hidden border-[1px] border-gray-200 p-8 relative lg:col-span-2">
<div class="h-full">
<div class="h-full z-10 relative lg:flex lg:justify-between lg:w-full lg:pr-8 lg:items-center">
<div class="flex flex-col flex-1 justify-between h-full space-y-5">
<div class="flex justify-between flex-col">
<div class="text-xl md:text-2xl font-bold text-gray-900 flex justify-between">
<span>Free</span>
</div>
<div class="pt-5 text-gray-500 font-medium text-base space-y-1">
<div class="flex items-center align-bottom"><span class="pt-1.5">$</span>
<div class="ml-1 mr-2 text-2xl md:text-3xl font-bold text-gray-900">
<span>0</span>
</div><span class="pt-1.5">per month</span>
</div>
<div class="text-base">billed
annually
</div>
</div>
<div class="lg:hidden">
<ul class="space-y-2 pt-8 lg:pt-0">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>No credit card required</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Free forever</span>
</li>
<li class="flex items-center font-medium space-x-2 text-gray-600">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>3 seats</span>
</li>
<li class="flex items-center font-medium space-x-2 text-gray-600">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>200 events / month</span>
</li>
</ul>
</div>
</div>
<div class="pt-2">
<a href="/billing" type="button" target="_blank"
class="appearance-none inline-flex hover:shadow-2xl transition-all duration-300 hover:scale-105 items-center group space-x-2.5 bg-black text-white py-4 px-5 rounded-2xl cursor-pointer"><span
class="w-full font-semibold text-base">Choose Free</span>
<svg class="inline-block h-6" viewBox="0 0 24 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.4999H21L14 19.4999M14 5.5L18 9.5" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="hidden lg:block">
<ul class="space-y-2 pt-8 lg:pt-0">
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>No credit card required</span>
</li>
<li class="flex items-center font-medium space-x-2 text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>Free forever</span>
</li>
<li class="flex items-center font-medium space-x-2 text-gray-600">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>3 seats</span>
</li>
<li class="flex items-center font-medium space-x-2 text-gray-600">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.4444 3.03947C15.1056 2.37412 13.5965 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.6244 21.9793 11.2537 21.939 10.8889M9 11L12 14L22 4"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><span>200 events / month</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="rounded-[30px] md:rounded-[36px] bg-[#FAFAFA] overflow-hidden border-[1px] border-gray-200 p-8 relative sm:col-span-2 lg:col-span-1">
<div class="h-full">
<div class="flex flex-col justify-between h-full space-y-5">
<div class="flex justify-between flex-col">
<div class="text-xl md:text-2xl font-bold text-gray-900 flex justify-between">
<span>Enterprise</span>
</div>
<div class="pt-5">Contact us for a custom quote and a custom onboarding process.</div>
</div>
<div class="pt-2">
<a href="#" type="button"
class="appearance-none inline-flex hover:shadow-2xl transition-all duration-300 hover:scale-105 items-center group space-x-2.5 bg-black text-white py-4 px-5 rounded-2xl cursor-pointer"><span
class="w-full font-semibold text-base">Contact Sales</span>
<svg class="inline-block h-6" viewBox="0 0 24 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.4999H21L14 19.4999M14 5.5L18 9.5" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet provides a visually appealing and responsive pricing cards grid, designed to showcase different pricing plans in a clear and organized manner. The grid features customizable card designs, clear pricing information, and a clean layout for easy navigation.
Key Features:
- Responsive Design: The pricing cards grid adapts seamlessly to various screen sizes, ensuring a consistent user experience across devices.
- Customizable Styling: Easily modify the appearance of the pricing cards using Tailwind CSS utility classes to match your website's design and branding.
- Clear Pricing Information: Present pricing plans in a clear and concise format, including monthly or annual costs, billed annually or monthly, and any applicable discounts or promotions.
- Feature Highlights: Compare different pricing plans by highlighting the key features included in each tier.
- Call-to-Action Buttons: Include prominent call-to-action buttons within each pricing card to encourage users to select a plan and proceed to the next step.
Implementation:
- Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the pricing cards grid, including the container, card rows, and individual card elements.
- Apply Tailwind CSS Classes: Use Tailwind CSS utility classes to style the pricing cards and their elements, such as pricing-card, card-header, card-body, card-footer, price, feature, and btn.
- Customize as Needed: Modify the Tailwind CSS classes and HTML structure to customize the appearance and content of the pricing cards according to your specific requirements.
Latest Snippets
View All
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Developer-Focused Tailwind Hero with Live Sample Code Block
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
