A minimal pricing section built with pure HTML and CSS designed specifically for landing pages that require focused, distraction free plan presentation. It emphasizes clean structure and concise tier display to support high conversion layouts.
Usage
Use this component when a landing page needs streamlined pricing visibility, such as product launches, SaaS promotions, service offers, or campaign specific pages where clarity and simplicity improve conversions.
Implementation
The layout uses compact tier alignment, controlled spacing, and simplified feature lists to maintain visual balance. CSS handles responsive stacking, consistent typography, and clear call-to-action placement across screen sizes.
HTML
<section class="pricing-minimal">
<h2>Simple Pricing</h2>
<p class="subtitle">Start free. Upgrade when you’re ready.</p>
<div class="pricing-grid">
<div class="plan">
<h3>Starter</h3>
<div class="price">$12</div>
<p>For individuals and side projects</p>
<button>Get Started</button>
</div>
<div class="plan featured">
<span class="badge">Most Popular</span>
<h3>Pro</h3>
<div class="price">$29</div>
<p>Best for growing teams</p>
<button>Upgrade</button>
</div>
<div class="plan">
<h3>Enterprise</h3>
<div class="price">Custom</div>
<p>Advanced security and support</p>
<button>Contact Sales</button>
</div>
</div>
</section>CSS
:root {
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--primary:#2563eb;
--border:#e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg:#020617;
--card:#0f172a;
--text:#e5e7eb;
--muted:#94a3b8;
--primary:#3b82f6;
--border:#1e293b;
}
}
.pricing-minimal {
background:var(--bg);
padding:56px 16px;
text-align:center;
color:var(--text);
}
.pricing-minimal h2 {
font-size:1.8rem;
margin-bottom:8px;
}
.pricing-minimal .subtitle {
font-size:1rem;
color:var(--muted);
margin-bottom:36px;
}
.pricing-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
max-width:960px;
margin:0 auto;
}
.plan {
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:32px 24px;
}
.plan h3 {
font-size:1.1rem;
margin-bottom:8px;
}
.price {
font-size:2.2rem;
font-weight:700;
margin:16px 0;
}
.plan p {
font-size:.95rem;
color:var(--muted);
margin-bottom:20px;
}
.plan.featured {
background:var(--primary);
color:#fff;
border:none;
}
.plan.featured p {
color:rgba(255,255,255,.85);
}
.badge {
display:inline-block;
background:#fff;
color:var(--primary);
font-size:.7rem;
font-weight:700;
padding:6px 12px;
border-radius:999px;
margin-bottom:12px;
}
.plan button {
padding:12px 20px;
font-size:.9rem;
font-weight:600;
border-radius:999px;
border:none;
background:var(--primary);
color:#fff;
cursor:pointer;
}
.plan.featured button {
background:#fff;
color:var(--primary);
}
@media (max-width: 480px) {
.pricing-minimal {
padding:40px 12px;
}
.price {
font-size:1.8rem;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for conversion focused landing pages
- Maintains clean and distraction free layout
- Fully responsive across breakpoints
- Supports 2–3 concise pricing tiers
- Optimized for fast loading UI sections
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.