This pricing section uses a comparison table layout to help users clearly compare features across plans.
HTML
<section class="pricing-compare">
<h2>Compare Plans</h2>
<p class="subtitle">See what’s included in each plan</p>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Features</th>
<th>Starter</th>
<th class="highlight">Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Projects</td>
<td>3</td>
<td class="highlight">Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Team Members</td>
<td>1</td>
<td class="highlight">10</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Storage</td>
<td>5 GB</td>
<td class="highlight">100 GB</td>
<td>1 TB</td>
</tr>
<tr>
<td>Analytics</td>
<td>—</td>
<td class="highlight">✔</td>
<td>✔</td>
</tr>
<tr>
<td>Priority Support</td>
<td>—</td>
<td class="highlight">✔</td>
<td>✔</td>
</tr>
<tr>
<td>Custom Integrations</td>
<td>—</td>
<td>—</td>
<td>✔</td>
</tr>
</tbody>
</table>
</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-compare {
background: var(--bg);
padding: 32px 16px;
color: var(--text);
}
.pricing-compare h2 {
text-align: center;
font-size: 1.4rem;
margin-bottom: 6px;
}
.pricing-compare .subtitle {
text-align: center;
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 20px;
}
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
background: var(--card);
border-radius: 14px;
overflow: hidden;
}
th,
td {
padding: 14px 12px;
text-align: center;
font-size: 0.85rem;
border-bottom: 1px solid var(--border);
}
th:first-child,
td:first-child {
text-align: left;
}
thead th {
font-size: 0.8rem;
color: var(--muted);
background: rgba(0, 0, 0, 0.02);
}
.highlight {
background: rgba(37, 99, 235, 0.08);
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.highlight {
background: rgba(59, 130, 246, 0.18);
}
}
tbody tr:last-child td {
border-bottom: none;
}
@media (max-width: 480px) {
th,
td {
padding: 10px 8px;
font-size: 0.75rem;
}
}Notes
- High-intent pricing layout
- Enterprise-friendly
- Ideal for B2B SaaS
- Scales well
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.