A SaaS pricing section with highlighted plan built using pure HTML and CSS that visually emphasizes a recommended or popular tier within multiple subscription options. It strengthens plan selection focus through contrast styling and structured layout hierarchy.
Usage
Use this component when one subscription tier needs visual recommendation emphasis, such as a “Most Popular” plan, best value package, or primary offering in SaaS platforms and digital services.
Implementation
The highlight effect is created using contrast backgrounds, accent borders, and emphasis badges, while maintaining consistent card alignment. CSS ensures responsive stacking behavior and preserves hierarchy across desktop and mobile layouts.
HTML
<section class="pricing">
<div class="plan">Basic</div>
<div class="plan featured">Pro</div>
<div class="plan">Enterprise</div>
</section>CSS
:root {
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #0f172a;
--muted: #64748b;
--primary: #2563eb;
--primary-contrast: #ffffff;
--border: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #020617;
--card-bg: #0f172a;
--text: #e5e7eb;
--muted: #94a3b8;
--primary: #3b82f6;
--border: #1e293b;
}
}
.pricing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
background: var(--bg);
padding: 16px;
}
.plan {
padding: 24px;
background: var(--card-bg);
border-radius: 16px;
text-align: center;
color: var(--text);
border: 1px solid var(--border);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.plan h3 {
font-size: 1.1rem;
margin-bottom: 8px;
}
.plan .price {
font-size: 2rem;
font-weight: 700;
margin: 12px 0;
}
.plan p {
color: var(--muted);
font-size: 0.9rem;
}
.plan.featured {
background: var(--primary);
color: var(--primary-contrast);
border: none;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}
.plan.featured p {
color: rgba(255, 255, 255, 0.85);
}
.plan.featured .price {
color: #ffffff;
}
.plan button {
margin-top: 16px;
padding: 10px 16px;
border-radius: 999px;
border: none;
font-weight: 600;
cursor: pointer;
background: var(--primary);
color: #fff;
}
.plan.featured button {
background: #ffffff;
color: var(--primary);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Highlights a recommended pricing tier
- Maintains structured visual hierarchy clarity
- Fully responsive across breakpoints
- Suitable for SaaS and subscription platforms
- Supports customizable accent styling
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.