10 CSS Feature Sections 06 / 10

CSS Feature Comparison Section

A side-by-side feature comparison table: “Typical SaaS” vs “Our Platform” with ✓/✕/~ check indicators, a purple recommended column with extra border+shadow, and two pricing cards at the bottom.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs06">
  <div class="fs06__inner">
    <div class="fs06__header">
      <div class="fs06__chip">Compare plans</div>
      <h2 class="fs06__h2">Why teams switch<br>to <span>our platform</span></h2>
      <p class="fs06__sub">Side-by-side, the difference is obvious. Here's what you get that the alternatives simply don't offer.</p>
    </div>

    <div class="fs06__tabs">
      <div class="fs06__tab">Features</div>
      <div class="fs06__tab fs06__tab--on">vs Competitors</div>
    </div>

    <div class="fs06__compare">
      <div class="fs06__col fs06__col--them">
        <div class="fs06__col-head">
          <div class="fs06__col-name">Typical SaaS</div>
          <span class="fs06__badge fs06__badge--gray">Others</span>
        </div>
        <div class="fs06__divider"></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">Real-time collaboration</span><span class="fs06__row-note">Add-on only</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--part">~</div><span class="fs06__row-label">Custom domain support</span><span class="fs06__row-note">Enterprise tier</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">Automated backups</span><span class="fs06__row-note">Manual only</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">AI-assisted workflows</span><span class="fs06__row-note">Not available</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--part">~</div><span class="fs06__row-label">API rate limits</span><span class="fs06__row-note">1k req/min</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">SSO included</span><span class="fs06__row-note">+$150/mo</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">SLA uptime guarantee</span><span class="fs06__row-note">Best effort</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--part">~</div><span class="fs06__row-label">Audit logs</span><span class="fs06__row-note">30-day only</span></div>
      </div>

      <div class="fs06__col fs06__col--us">
        <div class="fs06__col-head">
          <div class="fs06__col-name">Our Platform</div>
          <span class="fs06__badge fs06__badge--purple">Recommended</span>
        </div>
        <div class="fs06__divider"></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Real-time collaboration</span><span class="fs06__row-note">All plans</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Custom domain support</span><span class="fs06__row-note">All plans</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Automated backups</span><span class="fs06__row-note">Hourly, 90-day retention</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">AI-assisted workflows</span><span class="fs06__row-note">Built-in</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">API rate limits</span><span class="fs06__row-note">Unlimited</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">SSO included</span><span class="fs06__row-note">Free on all plans</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">SLA uptime guarantee</span><span class="fs06__row-note">99.99% guaranteed</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Audit logs</span><span class="fs06__row-note">Unlimited retention</span></div>
      </div>
    </div>

    <div class="fs06__price-row">
      <div class="fs06__price-card fs06__price-card--them">
        <div class="fs06__price-num">$249</div>
        <div class="fs06__price-period">per month, typical competitor</div>
        <a href="#" class="fs06__price-btn fs06__price-btn--gray">Learn more</a>
      </div>
      <div class="fs06__price-card fs06__price-card--us">
        <div class="fs06__price-num">$89</div>
        <div class="fs06__price-period">per month, everything included</div>
        <a href="#" class="fs06__price-btn fs06__price-btn--white">Start free trial →</a>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs06 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
  color: #111827;
  padding: 100px 24px;
}

.fs06__inner { max-width: 1060px; margin: 0 auto; }

.fs06__header { text-align: center; margin-bottom: 64px; }

.fs06__chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d28d9;
  background: #f3eeff;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.fs06__h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.fs06__h2 span { color: #6d28d9; }

.fs06__sub {
  font-size: 17px;
  color: #6b7280;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Toggle tabs */
.fs06__tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  max-width: 320px;
  margin: 0 auto 56px;
}

.fs06__tab {
  flex: 1;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
  user-select: none;
}

.fs06__tab--on {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Two-column comparison */
.fs06__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.fs06__col {
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid transparent;
}

.fs06__col--them {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.fs06__col--us {
  background: #fff;
  border-color: #6d28d9;
  box-shadow: 0 0 0 1px #6d28d9, 0 20px 60px rgba(109,40,217,0.12);
}

.fs06__col-head {
  padding: 28px 28px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs06__col-name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.fs06__col--them .fs06__col-name { color: #6b7280; }

.fs06__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.fs06__badge--purple { background: #f3eeff; color: #6d28d9; }
.fs06__badge--gray { background: #e5e7eb; color: #9ca3af; }

.fs06__divider { height: 1px; background: #e5e7eb; margin: 0 0 4px; }

.fs06__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.fs06__row:last-child { border-bottom: none; }

.fs06__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.fs06__check--yes { background: #d1fae5; color: #059669; }
.fs06__check--no { background: #f3f4f6; color: #9ca3af; }
.fs06__check--part { background: #fef3c7; color: #d97706; }

.fs06__row-label { flex: 1; }

.fs06__row-note {
  font-size: 12px;
  color: #9ca3af;
}

.fs06__col--us .fs06__row-note { color: #6d28d9; }

/* Pricing footer */
.fs06__price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

.fs06__price-card {
  border-radius: 16px;
  padding: 28px;
  text-align: center;
}

.fs06__price-card--them {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.fs06__price-card--us {
  background: linear-gradient(135deg, #6d28d9, #9b59f7);
  color: #fff;
}

.fs06__price-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.fs06__price-card--them .fs06__price-num { color: #9ca3af; }

.fs06__price-period { font-size: 13px; opacity: 0.7; margin: 4px 0 16px; }

.fs06__price-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.fs06__price-btn:hover { opacity: 0.85; }
.fs06__price-btn--gray { background: #e5e7eb; color: #6b7280; }
.fs06__price-btn--white { background: #fff; color: #6d28d9; }

@media (max-width: 640px) {
  .fs06__compare, .fs06__price-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs06__tab, .fs06__price-btn { transition: none; }
}

More from 10 CSS Feature Sections

CSS Feature Section Timeline LayoutCSS Feature Section with Icon GridCSS Bento Grid Features LayoutCSS Feature Section Dark GlassmorphismCSS Feature Section with Code PreviewCSS SaaS Features Section 2025CSS Feature Section with Floating MockupCSS Animated Feature Cards Scroll RevealCSS Feature Section 3D Perspective Cards
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →