Pricing Table
Three-column pricing tier on a CSS Grid base. The middle tier scales up using `transform: scale()` while staying in the same grid track — the baseline pricing pattern with consistent header / price / feature / CTA rows.
The code
<div class="gl-pri">
<article class="gl-pri-tier">
<h4>Free</h4>
<strong>$0</strong><span class="gl-pri-coord">column 1</span>
<p>Personal projects · 1 user</p>
<a>Choose</a>
</article>
<article class="gl-pri-tier gl-pri-pop">
<span class="gl-pri-badge">Recommended</span>
<h4>Pro</h4>
<strong>$24</strong><span class="gl-pri-coord">column 2 · scaled</span>
<p>Teams · unlimited projects</p>
<a>Choose</a>
</article>
<article class="gl-pri-tier">
<h4>Enterprise</h4>
<strong>$96</strong><span class="gl-pri-coord">column 3</span>
<p>SSO · audit logs · SLA</p>
<a>Talk to sales</a>
</article>
</div> <div class="gl-pri">
<article class="gl-pri-tier">
<h4>Free</h4>
<strong>$0</strong><span class="gl-pri-coord">column 1</span>
<p>Personal projects · 1 user</p>
<a>Choose</a>
</article>
<article class="gl-pri-tier gl-pri-pop">
<span class="gl-pri-badge">Recommended</span>
<h4>Pro</h4>
<strong>$24</strong><span class="gl-pri-coord">column 2 · scaled</span>
<p>Teams · unlimited projects</p>
<a>Choose</a>
</article>
<article class="gl-pri-tier">
<h4>Enterprise</h4>
<strong>$96</strong><span class="gl-pri-coord">column 3</span>
<p>SSO · audit logs · SLA</p>
<a>Talk to sales</a>
</article>
</div>.gl-pri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(34,197,94,0.14), transparent 60%),
#07140e;
font-family: 'Inter', system-ui, sans-serif;
color: #ecfdf5;
box-sizing: border-box;
align-items: center;
}
.gl-pri-tier {
position: relative;
background: #0d2018;
border: 1px solid rgba(34,197,94,0.22);
border-radius: 14px;
padding: 22px 18px;
display: flex; flex-direction: column;
gap: 10px;
text-align: center;
}
.gl-pri-tier h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #34d399; }
.gl-pri-tier strong { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-pri-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; letter-spacing: 0.04em;
color: #34d399;
background: rgba(34,197,94,0.14); border-radius: 999px;
padding: 3px 10px; align-self: center;
}
.gl-pri-tier p { margin: 0; font-size: 13px; color: #a7d8b9; }
.gl-pri-tier a { display: block; padding: 10px; border-radius: 8px; background: rgba(34,197,94,0.14); color: #34d399; text-decoration: none; font-weight: 600; font-size: 13px; cursor: default; }
.gl-pri-pop {
background: linear-gradient(180deg, #16a34a, #15803d);
border-color: #34d399;
transform: scale(1.04);
box-shadow: 0 14px 40px rgba(34,197,94,0.25);
color: #07140e;
}
.gl-pri-pop h4, .gl-pri-pop strong { color: #07140e; }
.gl-pri-pop p { color: rgba(7,20,14,0.8); }
.gl-pri-pop a { background: #07140e; color: #34d399; }
.gl-pri-pop .gl-pri-coord { background: rgba(7,20,14,0.25); color: #07140e; }
.gl-pri-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: #07140e; color: #34d399;
font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; padding: 4px 10px;
border-radius: 999px;
}
@media (max-width: 720px) {
.gl-pri { grid-template-columns: 1fr; }
.gl-pri-pop { transform: none; }
} .gl-pri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 80% at 50% 0%, rgba(34,197,94,0.14), transparent 60%),
#07140e;
font-family: 'Inter', system-ui, sans-serif;
color: #ecfdf5;
box-sizing: border-box;
align-items: center;
}
.gl-pri-tier {
position: relative;
background: #0d2018;
border: 1px solid rgba(34,197,94,0.22);
border-radius: 14px;
padding: 22px 18px;
display: flex; flex-direction: column;
gap: 10px;
text-align: center;
}
.gl-pri-tier h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #34d399; }
.gl-pri-tier strong { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-pri-coord {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; letter-spacing: 0.04em;
color: #34d399;
background: rgba(34,197,94,0.14); border-radius: 999px;
padding: 3px 10px; align-self: center;
}
.gl-pri-tier p { margin: 0; font-size: 13px; color: #a7d8b9; }
.gl-pri-tier a { display: block; padding: 10px; border-radius: 8px; background: rgba(34,197,94,0.14); color: #34d399; text-decoration: none; font-weight: 600; font-size: 13px; cursor: default; }
.gl-pri-pop {
background: linear-gradient(180deg, #16a34a, #15803d);
border-color: #34d399;
transform: scale(1.04);
box-shadow: 0 14px 40px rgba(34,197,94,0.25);
color: #07140e;
}
.gl-pri-pop h4, .gl-pri-pop strong { color: #07140e; }
.gl-pri-pop p { color: rgba(7,20,14,0.8); }
.gl-pri-pop a { background: #07140e; color: #34d399; }
.gl-pri-pop .gl-pri-coord { background: rgba(7,20,14,0.25); color: #07140e; }
.gl-pri-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: #07140e; color: #34d399;
font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; padding: 4px 10px;
border-radius: 999px;
}
@media (max-width: 720px) {
.gl-pri { grid-template-columns: 1fr; }
.gl-pri-pop { transform: none; }
}