pricingIntermediate
Pricing — Two-Tier
Two-tier pricing comparison with feature checklists.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a 2-tier pricing comparison with Tailwind: side-by-side plan cards with name, price, feature list with checkmarks, and CTA. The 'Pro' plan emphasized with a darker fill or accent border.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/pricing/2.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-pricing-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class=" w-full">
<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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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>
</div>
</div>