Back to marketing components
Pricing
Pricing components built with Tailwind CSS. These responsive, customizable pricing tables and plan layouts are ideal for SaaS, eCommerce, and service websites. Improve conversions and SEO with clear, accessible pricing options for your users.
0/2 Dark Mode (Request)Updated: Jul 4, 2026
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center md:gap-8">
<div
class="rounded-2xl border border-indigo-600 p-6 shadow-xs ring-1 ring-indigo-600 sm:order-last sm:px-8 lg:p-12"
>
<div class="text-center">
<h2 class="text-lg font-medium text-gray-900">
Pro
<span class="sr-only">Plan</span>
</h2>
<p class="mt-2 sm:mt-4">
<strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 30$ </strong>
<span class="text-sm font-medium text-gray-700">/month</span>
</p>
</div>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 20 users included </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 5GB of storage </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Email support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Help center access </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Phone support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Community access </span>
</li>
</ul>
<a
href="#"
class="mt-8 block rounded-full border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-indigo-700 hover:ring-1 hover:ring-indigo-700"
>
Get Started
</a>
</div>
<div class="rounded-2xl border border-gray-200 p-6 shadow-xs sm:px-8 lg:p-12">
<div class="text-center">
<h2 class="text-lg font-medium text-gray-900">
Starter
<span class="sr-only">Plan</span>
</h2>
<p class="mt-2 sm:mt-4">
<strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 20$ </strong>
<span class="text-sm font-medium text-gray-700">/month</span>
</p>
</div>
<ul class="mt-6 space-y-2">
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 10 users included </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 2GB of storage </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Email support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Help center access </span>
</li>
</ul>
<a
href="#"
class="mt-8 block rounded-full border border-indigo-600 bg-white px-12 py-3 text-center text-sm font-medium text-indigo-600 hover:ring-1 hover:ring-indigo-600"
>
Get Started
</a>
</div>
</div>
</div><div class="max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-stretch md:grid-cols-3 md:gap-8">
<div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
<div class="p-6 sm:px-8">
<h2 class="text-lg font-medium text-gray-900">
Starter
<span class="sr-only">Plan</span>
</h2>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="mt-2 sm:mt-4">
<strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 20$ </strong>
<span class="text-sm font-medium text-gray-700">/month</span>
</p>
<a
class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
href="#"
>
Get Started
</a>
</div>
<div class="p-6 sm:px-8">
<p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>
<ul class="mt-2 space-y-2 sm:mt-4">
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 10 users </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 2GB of storage </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Email support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-red-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-gray-700"> Help center access </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-red-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-gray-700"> Phone support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-red-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-gray-700"> Community access </span>
</li>
</ul>
</div>
</div>
<div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
<div class="p-6 sm:px-8">
<h2 class="text-lg font-medium text-gray-900">
Pro
<span class="sr-only">Plan</span>
</h2>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="mt-2 sm:mt-4">
<strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 30$ </strong>
<span class="text-sm font-medium text-gray-700">/month</span>
</p>
<a
class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
href="#"
>
Get Started
</a>
</div>
<div class="p-6 sm:px-8">
<p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>
<ul class="mt-2 space-y-2 sm:mt-4">
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 20 users </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 5GB of storage </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Email support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Help center access </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-red-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-gray-700"> Phone support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-red-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-gray-700"> Community access </span>
</li>
</ul>
</div>
</div>
<div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
<div class="p-6 sm:px-8">
<h2 class="text-lg font-medium text-gray-900">
Enterprise
<span class="sr-only">Plan</span>
</h2>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="mt-2 sm:mt-4">
<strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 100$ </strong>
<span class="text-sm font-medium text-gray-700">/month</span>
</p>
<a
class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
href="#"
>
Get Started
</a>
</div>
<div class="p-6 sm:px-8">
<p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>
<ul class="mt-2 space-y-2 sm:mt-4">
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 50 users </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> 20GB of storage </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Email support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Help center access </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Phone support </span>
</li>
<li class="flex items-center gap-1">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 text-indigo-700"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span class="text-gray-700"> Community access </span>
</li>
</ul>
</div>
</div>
</div>
</div>