Pricing Table HTML Template
Compare plans side-by-side with a featured tier, badges, and bullet lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Plan Pricing | Atlas CRM</title>
<style>
body { font-family: 'Inter', sans-serif; margin: 0; background: #f4f6fb; color: #0f172a; }
header { text-align: center; padding: 4rem 1.5rem 2rem; }
.grid { max-width: 1100px; margin: 0 auto 4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; padding: 0 1.5rem; }
.plan { background: white; border-radius: 1.5rem; padding: 2rem; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1); }
.plan.highlight { border: 2px solid #2563eb; transform: translateY(-10px); }
.price { font-size: 2rem; font-weight: 700; }
ul { list-style: none; padding: 0; margin: 0; line-height: 1.8; color: #475569; }
button { border: none; border-radius: 999px; padding: 0.9rem; font-weight: 600; cursor: pointer; }
.primary { background: #2563eb; color: white; }
.secondary { border: 1px solid #cbd5f5; background: transparent; color: #2563eb; }
</style>
</head>
<body>
<header>
<h1>Choose the plan that grows with you</h1>
<p>Simple pricing for teams of any size. Cancel anytime.</p>
</header>
<section class="grid">
<article class="plan">
<h2>Starter</h2>
<p class="price">$18<span>/mo</span></p>
<ul>
<li>✓ 1,000 contacts</li>
<li>✓ Email workflows</li>
<li>✓ Shared inbox</li>
</ul>
<button class="secondary">Start trial</button>
</article>
<article class="plan highlight">
<h2>Growth</h2>
<p class="price">$59<span>/mo</span></p>
<ul>
<li>✓ Unlimited contacts</li>
<li>✓ Multichannel automation</li>
<li>✓ Live chat + analytics</li>
</ul>
<button class="primary">Start trial</button>
</article>
<article class="plan">
<h2>Enterprise</h2>
<p class="price">Custom</p>
<ul>
<li>✓ Dedicated CSM</li>
<li>✓ Advanced roles</li>
<li>✓ SOC 2 & SSO</li>
</ul>
<button class="secondary">Contact sales</button>
</article>
</section>
</body>
</html>