Dark Mode Pricing Card Template for TAILWIND
A reusable dark-mode pricing card component built with Tailwind CSS. Drop it into any HTML or framework project. Drop-in .html snippet with full source, ready to ship.
- Niche
- SaaS
- Asset Type
- pricing table
- File Type
- .html
- License
- MIT
What's included
- ✓Zero JavaScript
- ✓Responsive by default
- ✓Accessible color contrast
- ✓Drop-in component
Live code preview
Syntax-highlighted snippet from the .html source. Click Download Code for the full archive.
<div class="mx-auto max-w-sm rounded-2xl bg-slate-900 p-8 text-white shadow-2xl ring-1 ring-white/10">
<h3 class="text-sm font-semibold uppercase tracking-wider text-cyan-400">
Pro Plan
</h3>
<p class="mt-4 flex items-baseline gap-1">
<span class="text-5xl font-extrabold">$19</span>
<span class="text-sm font-medium text-slate-400">/month</span>
</p>
<p class="mt-2 text-sm text-slate-400">
Everything you need to ship faster.
</p>
<ul class="mt-6 space-y-3 text-sm">
<li class="flex items-center gap-3">
<span class="grid h-5 w-5 place-items-center rounded-full bg-cyan-500/20 text-cyan-300">✓</span>
Unlimited projects
</li>
<li class="flex items-center gap-3">
<span class="grid h-5 w-5 place-items-center rounded-full bg-cyan-500/20 text-cyan-300">✓</span>
Priority support
</li>
<li class="flex items-center gap-3">
<span class="grid h-5 w-5 place-items-center rounded-full bg-cyan-500/20 text-cyan-300">✓</span>
Analytics dashboard
</li>
</ul>
<button class="mt-8 w-full rounded-lg bg-cyan-400 px-4 py-3 text-sm font-semibold text-slate-900 transition hover:bg-cyan-300">
Start free trial
</button>
</div>Technical specifications
Framework version, dependencies, and licensing for the .html file.
| Framework & Version | Tailwind CSS 3.x / 4.x |
|---|---|
| Required Dependencies | tailwindcss |
| File Type | .html |
| License Type | MIT |
How to use this template
Follow these quick steps to integrate the snippet into your project.
- 1
Copy the markup
Paste the snippet into any HTML, Blade, JSX, or Vue template.
- 2
Ensure Tailwind is loaded
Make sure your build pipeline compiles the Tailwind utilities used.
- 3
Tweak the copy
Update the plan name, price, and feature list to match your offering.
- 4
Adjust the accent color
Swap `cyan-400` for any color in the Tailwind palette.
Frequently asked questions
Everything you need to know before downloading the dark mode pricing card.
Does it work with Tailwind v4?
Yes. All utility classes are stable across Tailwind v3 and v4.
Is the component accessible?
The markup uses semantic elements and high-contrast colors. Run an audit with axe or Lighthouse to verify.
Related templates
More TAILWIND templates you'll love.