Free Section
Feature Comparison Matrix Table
A comprehensive SaaS feature comparison matrix table with plan headers, checkmark rows, and highlighted recommended column.
Colours in this gradient
#090d16#3b82f6#10b981#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="matrix-sec">
<div class="matrix-header">
<span class="matrix-badge">Compare Features</span>
<h2>Pick the plan that scales with you</h2>
<p>All plans include full API access, edge CDN caching, and 99.9% uptime SLA.</p>
</div>
<div class="matrix-wrap">
<table class="matrix-table">
<thead>
<tr>
<th class="th-feat">Core Features</th>
<th class="th-plan">
<div class="plan-name">Starter</div>
<div class="plan-cost">$0 <small>/mo</small></div>
<button class="m-btn btn-ghost">Start Free</button>
</th>
<th class="th-plan th-rec">
<span class="rec-pill">Most Popular</span>
<div class="plan-name">Pro</div>
<div class="plan-cost">$49 <small>/mo</small></div>
<button class="m-btn btn-primary">Upgrade to Pro</button>
</th>
<th class="th-plan">
<div class="plan-name">Enterprise</div>
<div class="plan-cost">Custom</div>
<button class="m-btn btn-ghost">Contact Sales</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monthly Active Users</td>
<td>1,000</td>
<td class="td-rec">50,000</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Edge CDN Regions</td>
<td>5 regions</td>
<td class="td-rec">35+ global nodes</td>
<td>Dedicated cluster</td>
</tr>
<tr>
<td>Custom Domain & SSL</td>
<td><span class="chk">✓</span></td>
<td class="td-rec"><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>Role-Based Access Control</td>
<td><span class="dash">—</span></td>
<td class="td-rec"><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>Audit Logs (SIEM Export)</td>
<td><span class="dash">—</span></td>
<td class="td-rec">30 days</td>
<td>1 year retention</td>
</tr>
<tr>
<td>24/7 Dedicated Slack Channel</td>
<td><span class="dash">—</span></td>
<td class="td-rec"><span class="dash">—</span></td>
<td><span class="chk">✓</span></td>
</tr>
</tbody>
</table>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a SaaS plan feature comparison table section in HTML and CSS. Requirements: - Centered header with category pill. - Responsive table comparing Starter, Pro, and Enterprise tiers. - Highlighted Pro column with colored background, border accents, and "Most Popular" floating badge. - Green checkmarks (✓) for included features and soft dashes (—) for omitted features. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Structure HTML table with thead for tier pricing and tbody for features.
- 2
Add .th-rec and .td-rec styles with borders and subtle gradient tint to highlight featured tier.
- 3
Wrap table in an overflow-x: auto container for mobile horizontal scroll support.
Customisation tips
- Use white-space: nowrap on table header titles to prevent awkward line breaks.