Pricing Section in Tailwind CSS
With Responsive Design in Tailwind CSS
Tailwind CSS
Simple Price with Details
With Responsive Design
Pricing Section in Tailwind CSS
<section class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Heading -->
<div class="mx-auto max-w-2xl text-center">
<h2
class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"
>
Simple no-tricks pricing
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et
quasi iusto modi velit ut non voluptas in. Explicabo id ut laborum.
</p>
</div>
<!-- Pricing Panel -->
<div
class="mt-16 flex flex-col gap-6 lg:flex-row lg:items-stretch border border-gray-200 p-4 rounded-2xl"
>
<!-- Left Info -->
<div class="flex-1 p-8">
<h3 class="text-3xl font-semibold text-gray-900">
Lifetime membership
</h3>
<p class="mt-4 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
amet indis perferendis blanditiis repellendus etur quidem
assumenda.
</p>
<!-- What's included -->
<div class="mt-8">
<div class="flex items-center gap-2">
<h4
class="text-sm font-semibold text-indigo-600 whitespace-nowrap"
>
What’s included
</h4>
<div class="flex-1 h-[1px] bg-indigo-100"></div>
</div>
<ul
class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-y-4 text-sm text-gray-700"
>
<li class="flex items-center gap-2">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Private forum access
</li>
<li class="flex items-center gap-2">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Member resources
</li>
<li class="flex items-center gap-2">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Entry to annual conference
</li>
<li class="flex items-center gap-2">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Official member t-shirt
</li>
</ul>
</div>
</div>
<!-- Right Pricing Box -->
<div
class="flex w-full flex-col justify-between rounded-2xl border border-gray-200 bg-gray-50 p-10 text-center lg:max-w-sm"
>
<div>
<p class="text-sm font-semibold text-gray-600">
Pay once, own it forever
</p>
<p class="mt-8 text-6xl font-bold tracking-tight text-gray-900">
$349 <span class="text-sm font-medium text-gray-500">USD</span>
</p>
</div>
<div class="mt-6">
<a
href="#"
class="inline-block w-full rounded-md bg-indigo-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow hover:bg-indigo-500"
>
Get access
</a>
<p class="mt-3 text-xs text-gray-500">
Invoices and receipts are available for easy company reimbursement
</p>
</div>
</div>
</div>
</div>
</section>
Three Tiers with Toggle
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
<div
class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl"
>
Pricing that grows with you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving sales.
</p>
<div class="w-full flex justify-center mt-16">
<div class="inline-flex gap-x-1 rounded-full p-2 border border-gray-300">
<p class="text-base/7 font-semibold text-white bg-indigo-700 p-2 px-4 rounded-full">Monthly</p>
<p class="text-base/7 font-semibold text-gray-900 p-2 px-4 rounded-full cursor-pointer">Annually</p>
</div>
</div>
<div
id="plans"
class="relative z-[100] max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8 mt-20"
>
<!-- Freelancer Plan -->
<div
class="relative flex flex-col rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex-grow">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Freelancer
</h3>
<p class="mt-6 text-base/7 text-gray-600">
The essentials to provide your best work for clients.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$19</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md border border-indigo-200 px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-700 shadow-xs hover:border-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
48-hour support response time
</li>
</ul>
</div>
</div>
<!-- Startup Plan -->
<div
class="relative rounded-3xl bg-white border-2 border-indigo-600 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex items-center justify-between gap-2">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Startup
</h3>
<div>
<span class="text-sm font-semibold bg-indigo-100 p-2 px-4 rounded-full text-indigo-600">Most popular</span>
</div>
</div>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Enterprise
</h3>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$59</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md border border-indigo-200 px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-700 shadow-xs hover:border-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
</div>
</div>
Three Tiers with emphasized tirer
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
<div
class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl"
>
Pricing that grows with you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving sales.
</p>
<div class="w-full flex justify-center mt-16">
<div class="inline-flex gap-x-1 rounded-full p-2 border border-gray-300">
<p class="text-base/7 font-semibold text-white bg-indigo-700 p-2 px-4 rounded-full">Monthly</p>
<p class="text-base/7 font-semibold text-gray-900 p-2 px-4 rounded-full cursor-pointer">Annually</p>
</div>
</div>
<div
id="plans"
class="relative z-[100] max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8 mt-20"
>
<!-- Freelancer Plan -->
<div
class="relative flex flex-col rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex-grow">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Freelancer
</h3>
<p class="mt-6 text-base/7 text-gray-600">
The essentials to provide your best work for clients.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$19</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
48-hour support response time
</li>
</ul>
</div>
</div>
<!-- Startup Plan -->
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Startup
</h3>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div
class="relative rounded-3xl bg-gray-900 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-white"
>
Enterprise
</h3>
<p class="mt-6 text-base/7 text-gray-200">
The perfect plan if you're just getting started with our product.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-100">
Custom
</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-slate-700 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-slate-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600 sm:mt-10"
>Contact Sales</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-200 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-white"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-white"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-white"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-white"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-white"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-white"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
</div>
</div>
Three Tiers with toggle on dark
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-gray-900 px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-100 sm:text-6xl"
>
Pricing that grows with you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-400 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving sales.
</p>
<div class="w-full flex justify-center mt-16 ">
<div class="inline-flex gap-x-1 rounded-full p-2 bg-gray-800">
<p class="text-base/7 font-semibold text-white bg-indigo-700 p-2 px-4 rounded-full">Monthly</p>
<p class="text-base/7 font-semibold text-gray-100 p-2 px-4 rounded-full cursor-pointer">Annually</p>
</div>
</div>
<div
id="plans"
class="relative z-[100] max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8 mt-20"
>
<!-- Freelancer Plan -->
<div
class="relative flex flex-col rounded-3xl bg-gray-900 p-8 shadow-2xl ring-1 ring-gray-200/10 sm:p-10"
>
<div class="flex-grow">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-gray-100"
>
Freelancer
</h3>
<p class="mt-6 text-base/7 text-gray-300">
The essentials to provide your best work for clients.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-100""
>$19</span
>
<span class="text-base text-gray-300">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-gray-800 px-3.5 py-2.5 text-center text-sm font-semibold text-gray-100 shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-300 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
48-hour support response time
</li>
</ul>
</div>
</div>
<!-- Startup Plan -->
<div
class="relative rounded-3xl bg-gray-800 border-2 border-indigo-500 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex items-center justify-between gap-2">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-gray-100"
>
Startup
</h3>
<div>
<span class="text-sm font-semibold bg-indigo-500 p-2 px-4 rounded-full text-gray-100">Most popular</span>
</div>
</div>
<p class="mt-6 text-base/7 text-gray-200">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-100""
>$29</span
>
<span class="text-base text-gray-300">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-200 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div
class="relative rounded-3xl bg-gray-900 p-8 shadow-2xl ring-1 ring-gray-200/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-gray-100"
>
Enterprise
</h3>
<p class="mt-6 text-base/7 text-gray-200">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-100"
>$59</span
>
<span class="text-base text-gray-300">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-gray-800 px-3.5 py-2.5 text-center text-sm font-semibold text-gray-100 shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-100 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-gray-100"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
</div>
</div>
Three Tiers
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
<div
class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl"
>
Pricing that grows with you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.
</p>
<div
class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-7xl lg:grid-cols-3"
>
<div
class="rounded-3xl rounded-t-3xl bg-white p-8 ring-1 ring-gray-900/10 sm:mx-8 sm:rounded-b-none sm:p-10 lg:mx-0 lg:rounded-tr-none lg:rounded-bl-3xl"
>
<h3 id="tier-hobby" class="text-base/7 font-semibold text-indigo-600">
Freelancer
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900"
>$19</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Priority support
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Single sign-on
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Enterprise integrations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom reporting tools
</li>
</ul>
<a
href="#"
aria-describedby="tier-hobby"
class="mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10"
>Get started today</a
>
</div>
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex items-center justify-between gap-2">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Startup
</h3>
<div>
<span class="text-sm font-semibold bg-indigo-100 p-2 px-4 rounded-full text-indigo-600">Most popular</span>
</div>
</div>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$49</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
The perfect plan if you're just getting started with our product.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Get started today</a
>
</div>
<div
class="rounded-3xl rounded-t-3xl bg-white/60 p-8 ring-1 ring-gray-900/10 sm:mx-8 sm:rounded-b-none sm:p-10 lg:mx-0 lg:rounded-tl-none lg:rounded-br-3xl"
>
<h3 id="tier-hobby" class="text-base/7 font-semibold text-indigo-600">
Enterprise
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900"
>$99</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Priority support
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Single sign-on
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Enterprise integrations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom reporting tools
</li>
</ul>
<a
href="#"
aria-describedby="tier-hobby"
class="mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10"
>Get started today</a
>
</div>
</div>
</div>
Two tiers with emphasized tier
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
<div
class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl"
>
Choose the right plan for you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving sales.
</p>
<div
class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2"
>
<div
class="rounded-3xl rounded-t-3xl bg-white/60 p-8 ring-1 ring-gray-900/10 sm:mx-8 sm:rounded-b-none sm:p-10 lg:mx-0 lg:rounded-tr-none lg:rounded-bl-3xl"
>
<h3 id="tier-hobby" class="text-base/7 font-semibold text-indigo-600">
Hobby
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900"
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
The perfect plan if you're just getting started with our
product.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
24-hour support response time
</li>
</ul>
<a
href="#"
aria-describedby="tier-hobby"
class="mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10"
>Get started today</a
>
</div>
<div
class="relative rounded-3xl bg-gray-900 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-400"
>
Enterprise
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-white"
>$99</span
>
<span class="text-base text-gray-400">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-300">
Dedicated support and infrastructure for your company.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-300 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Get started today</a
>
</div>
</div>
</div>
Two Tiers
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
<div
class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl"
>
Choose the right plan for you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving sales.
</p>
<div
class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2"
>
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Personal
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
The perfect plan if you're just getting started with our product.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Get started today</a
>
</div>
<div
class="rounded-3xl rounded-t-3xl bg-white/60 p-8 ring-1 ring-gray-900/10 sm:mx-8 sm:rounded-b-none sm:p-10 lg:mx-0 lg:rounded-tl-none lg:rounded-br-3xl"
>
<h3 id="tier-hobby" class="text-base/7 font-semibold text-indigo-600">
Team
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900"
>$99</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Priority support
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Single sign-on
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Enterprise integrations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom reporting tools
</li>
</ul>
<a
href="#"
aria-describedby="tier-hobby"
class="mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10"
>Get started today</a
>
</div>
</div>
</div>
Two Tiers with Extra Space
With Responsive Design
Pricing Section in Tailwind CSS
<section class="bg-white">
<div
id="gradient"
class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 pb-44 shadow-2xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
>
<svg
viewBox="0 0 1024 1024"
class="absolute top-1/2 left-1/2 -z-10 size-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
aria-hidden="true"
>
<circle
cx="512"
cy="512"
r="512"
fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
fill-opacity="0.7"
/>
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
<stop stop-color="#00bcff" />
<stop offset="1" stop-color="#0031ff" />
</radialGradient>
</defs>
</svg>
<div
class="mx-auto max-w-4xl items-center justify-center text-center lg:flex-auto lg:py-32"
>
<div class="text-center mb-16">
<h4 class="text-indigo-600 font-semibold text-sm mb-2">Pricing</h4>
<h2 class="mt-2 text-5xl font-semibold tracking-tight text-balance text-white sm:text-6xl mb-8">
Choose the right plan for you
</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-normal text-pretty text-gray-400 sm:text-xl/8">
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving
sales.
</p>
</div>
<!-- end-->
</div>
</div>
<div
id="plans"
class="relative z-[100] max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-8 -mt-48 md:-mt-72 "
>
<!-- Hobby Plan -->
<div
class="relative flex flex-col rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex-grow">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Hobby
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
The perfect plan if you're just getting started with our product.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
48-hour support response time
</li>
</ul>
</div>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Get started today</a
>
</div>
<!-- Team Plan -->
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Personal
</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">
The perfect plan if you're just getting started with our product.
</p>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Get started today</a
>
</div>
</div>
</section>
Four Tiers with Toggle
With Responsive Design
Pricing Section in Tailwind CSS
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div
class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
aria-hidden="true"
>
<div
class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p
class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl"
>
Pricing that grows with you
</p>
</div>
<p
class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8"
>
Choose an affordable plan that’s packed with the best features for
engaging your audience, creating customer loyalty, and driving sales.
</p>
<div class="w-full flex justify-center mt-16">
<div class="inline-flex gap-x-1 rounded-full p-2 border border-gray-300">
<p class="text-base/7 font-semibold text-white bg-indigo-700 p-2 px-4 rounded-full">Monthly</p>
<p class="text-base/7 font-semibold text-gray-900 p-2 px-4 rounded-full cursor-pointer">Annually</p>
</div>
</div>
<div
id="plans"
class="relative z-[100] max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-8 mt-20"
>
<!-- Hobby Plan -->
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Hobby
</h3>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$19</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md border border-indigo-200 px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-700 shadow-xs hover:border-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Basic analytics
</li>
</ul>
</div>
<!-- Freelancer Plan -->
<div
class="relative flex flex-col rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex-grow">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Freelancer
</h3>
<p class="mt-6 text-base/7 text-gray-600">
The essentials to provide your best work for clients.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$29</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md border border-indigo-200 px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-700 shadow-xs hover:border-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
48-hour support response time
</li>
</ul>
</div>
</div>
<!-- Startup Plan -->
<div
class="relative rounded-3xl bg-white border-2 border-indigo-600 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<div class="flex items-center justify-between gap-2">
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Startup
</h3>
<div>
<span class="text-sm font-semibold bg-indigo-100 p-2 px-4 rounded-full text-indigo-600">Most popular</span>
</div>
</div>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$59</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div
class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10"
>
<h3
id="tier-enterprise"
class="text-base/7 font-semibold text-indigo-800"
>
Enterprise
</h3>
<p class="mt-6 text-base/7 text-gray-600">
A plan that scales with your rapidly growing business.
</p>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900""
>$99</span
>
<span class="text-base text-gray-500">/month</span>
</p>
<a
href="#"
aria-describedby="tier-enterprise"
class="mt-8 block rounded-md border border-indigo-200 px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-700 shadow-xs hover:border-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10"
>Buy Plan</a
>
<ul
role="list"
class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10"
>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg
class="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
/>
</svg>
Custom integrations
</li>
</ul>
</div>
</div>
</div>
Code copied to clipboard