pricingIntermediate
Pricing — Dark 3-Tier
Dark-mode three-tier pricing comparison.
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 dark 3-tier pricing section with Tailwind: gray-900 background, three plan cards with the middle one highlighted (different bg + 'Popular' tag), each with feature lists and a CTA button.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/pricing/dark/a.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-pricing-dark-a
-->
<div class="bg-gray-900 text-gray-300 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-4xl text-3xl font-medium title-font mb-2 text-white">
Pricing
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Honest writing, honest design. We pasted in a draft of our roadmap and it felt like the components were already part of the plan.</p>
<div class="flex mx-auto border-2 border-indigo-500 rounded overflow-hidden mt-6">
<button class="py-1 px-4 bg-indigo-500 text-white focus:outline-none">
Monthly
</button>
<button class="py-1 px-4 text-gray-300 focus:outline-none">
Annually
</button>
</div>
</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 xl:w-1/4 md:w-1/2 w-full">
<div class="h-full p-6 rounded-lg border-2 border-gray-700 flex flex-col relative overflow-hidden">
<h2 class="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
START
</h2>
<h1 class="text-5xl text-white pb-4 mb-4 border-b border-gray-800 leading-none">
Free
</h1>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Vexillologist pitchfork
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Tumeric plaid portland
</p>
<p class="flex items-center text-gray-400 mb-6">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Mixtape chillwave tumeric
</p>
<button class="flex items-center mt-auto text-white bg-gray-800 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-700 rounded">
Button
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</button>
<p class="text-xs text-gray-400 mt-3">
Literally you probably haven't heard of them jean shorts.
</p>
</div>
</div>
<div class="p-4 xl:w-1/4 md:w-1/2 w-full">
<div class="h-full p-6 rounded-lg border-2 border-indigo-500 flex flex-col relative overflow-hidden">
<span class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">
POPULAR
</span>
<h2 class="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
PRO
</h2>
<h1 class="text-5xl text-white leading-none flex items-center pb-4 mb-4 border-b border-gray-800">
<span>$38</span>
<span class="text-lg ml-1 font-normal text-gray-400">
/mo
</span>
</h1>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Vexillologist pitchfork
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Tumeric plaid portland
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Hexagon neutra unicorn
</p>
<p class="flex items-center text-gray-400 mb-6">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Mixtape chillwave tumeric
</p>
<button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">
Button
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</button>
<p class="text-xs text-gray-400 mt-3">
Literally you probably haven't heard of them jean shorts.
</p>
</div>
</div>
<div class="p-4 xl:w-1/4 md:w-1/2 w-full">
<div class="h-full p-6 rounded-lg border-2 border-gray-700 flex flex-col relative overflow-hidden">
<h2 class="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
BUSINESS
</h2>
<h1 class="text-5xl text-white leading-none flex items-center pb-4 mb-4 border-b border-gray-800">
<span>$56</span>
<span class="text-lg ml-1 font-normal text-gray-400">
/mo
</span>
</h1>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Vexillologist pitchfork
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Tumeric plaid portland
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Hexagon neutra unicorn
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Vexillologist pitchfork
</p>
<p class="flex items-center text-gray-400 mb-6">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Mixtape chillwave tumeric
</p>
<button class="flex items-center mt-auto text-white bg-gray-800 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-700 rounded">
Button
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</button>
<p class="text-xs text-gray-400 mt-3">
Literally you probably haven't heard of them jean shorts.
</p>
</div>
</div>
<div class="p-4 xl:w-1/4 md:w-1/2 w-full">
<div class="h-full p-6 rounded-lg border-2 border-gray-700 flex flex-col relative overflow-hidden">
<h2 class="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
SPECIAL
</h2>
<h1 class="text-5xl text-white leading-none flex items-center pb-4 mb-4 border-b border-gray-800">
<span>$72</span>
<span class="text-lg ml-1 font-normal text-gray-400">
/mo
</span>
</h1>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Vexillologist pitchfork
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Tumeric plaid portland
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Hexagon neutra unicorn
</p>
<p class="flex items-center text-gray-400 mb-2">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Vexillologist pitchfork
</p>
<p class="flex items-center text-gray-400 mb-6">
<span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
class="w-3 h-3"
viewBox="0 0 24 24"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
Mixtape chillwave tumeric
</p>
<button class="flex items-center mt-auto text-white bg-gray-800 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-700 rounded">
Button
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
class="w-4 h-4 ml-auto"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</button>
<p class="text-xs text-gray-400 mt-3">
Literally you probably haven't heard of them jean shorts.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>