10 CSS Feature Sections 05 / 10

CSS Feature Section with Code Preview

A GitHub-dark developer SDK feature section: a tabbed code window with full JetBrains Mono syntax highlighting (keywords, strings, comments, numbers) and a four-column feature-tile grid below.

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

The code

<section class="fs05">
  <div class="fs05__inner">
    <div class="fs05__top">
      <div>
        <div class="fs05__label">$ npm install @platform/sdk</div>
        <h2 class="fs05__h2">A developer API that<br>gets out of your <em>way</em></h2>
        <p class="fs05__p">Five lines to integrate. Full TypeScript types. Logs you can actually read. Built by engineers who've suffered through every other SDK so you don't have to.</p>
        <div class="fs05__cta-row">
          <a href="#" class="fs05__btn fs05__btn--green">Read the docs</a>
          <a href="#" class="fs05__btn fs05__btn--ghost">View on GitHub</a>
        </div>
      </div>

      <div class="fs05__window">
        <div class="fs05__win-bar">
          <div class="fs05__win-tabs">
            <div class="fs05__tab fs05__tab--active">index.ts</div>
            <div class="fs05__tab">config.json</div>
          </div>
          <div class="fs05__win-dots">
            <div class="fs05__dot"></div>
            <div class="fs05__dot"></div>
            <div class="fs05__dot"></div>
          </div>
        </div>
        <div class="fs05__code">
          <div><span class="fs05__ln">1</span><span class="cm">// Initialize the client with your API key</span></div>
          <div><span class="fs05__ln">2</span><span class="kw">import</span> { <span class="obj">Platform</span> } <span class="kw">from</span> <span class="str">'@platform/sdk'</span>;</div>
          <div><span class="fs05__ln">3</span></div>
          <div><span class="fs05__ln">4</span><span class="kw">const</span> <span class="var">client</span> = <span class="kw">new</span> <span class="fn">Platform</span>({</div>
          <div><span class="fs05__ln">5</span>&nbsp;&nbsp;<span class="prop">apiKey</span>: <span class="var">process</span>.<span class="prop">env</span>.<span class="prop">PLATFORM_KEY</span>,</div>
          <div><span class="fs05__ln">6</span>&nbsp;&nbsp;<span class="prop">region</span>: <span class="str">'us-east-1'</span>,</div>
          <div><span class="fs05__ln">7</span>&nbsp;&nbsp;<span class="prop">retries</span>: <span class="num">3</span>,</div>
          <div><span class="fs05__ln">8</span>});</div>
          <div><span class="fs05__ln">9</span></div>
          <div><span class="fs05__ln">10</span><span class="cm">// Stream events with full TypeScript types</span></div>
          <div><span class="fs05__ln">11</span><span class="kw">const</span> <span class="var">stream</span> = <span class="kw">await</span> <span class="var">client</span>.<span class="fn">events</span>.<span class="fn">stream</span>({</div>
          <div><span class="fs05__ln">12</span>&nbsp;&nbsp;<span class="prop">source</span>: <span class="str">'production'</span>,</div>
          <div><span class="fs05__ln">13</span>&nbsp;&nbsp;<span class="prop">filter</span>: { <span class="prop">type</span>: <span class="str">'purchase'</span> },</div>
          <div><span class="fs05__ln">14</span>});</div>
          <div><span class="fs05__ln">15</span></div>
          <div><span class="fs05__ln">16</span><span class="kw">for await</span> (<span class="kw">const</span> <span class="var">event</span> <span class="kw">of</span> <span class="var">stream</span>) {</div>
          <div><span class="fs05__ln">17</span>&nbsp;&nbsp;<span class="var">console</span>.<span class="fn">log</span>(<span class="var">event</span>.<span class="prop">data</span>); <span class="cm">// fully typed</span></div>
          <div><span class="fs05__ln">18</span>}</div>
        </div>
      </div>
    </div>

    <div class="fs05__features">
      <div class="fs05__feat">
        <div class="fs05__feat-icon">🔷</div>
        <div class="fs05__feat-title">Full TypeScript support</div>
        <div class="fs05__feat-desc">Every method, event, and error is typed. IntelliSense autocompletes your way through the entire API surface.</div>
        <span class="fs05__feat-badge">types: strict</span>
      </div>
      <div class="fs05__feat">
        <div class="fs05__feat-icon">🔄</div>
        <div class="fs05__feat-title">Idempotent retries</div>
        <div class="fs05__feat-desc">Automatic exponential backoff with jitter. Duplicate prevention guaranteed via idempotency keys.</div>
        <span class="fs05__feat-badge">retries: 3</span>
      </div>
      <div class="fs05__feat">
        <div class="fs05__feat-icon">📦</div>
        <div class="fs05__feat-title">Webhook validation</div>
        <div class="fs05__feat-desc">Verify every inbound payload with one helper. HMAC-SHA256 signature checking built into the SDK.</div>
        <span class="fs05__feat-badge">hmac-sha256</span>
      </div>
      <div class="fs05__feat">
        <div class="fs05__feat-icon">🪵</div>
        <div class="fs05__feat-title">Structured logging</div>
        <div class="fs05__feat-desc">JSON logs with trace IDs and request context that pipe directly into Datadog, Grafana, or any OTEL collector.</div>
        <span class="fs05__feat-badge">otel-ready</span>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs05 {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #7d8590;
  --green: #3fb950;
  --blue: #79c0ff;
  --purple: #d2a8ff;
  --orange: #ffa657;
  --red: #ff7b72;
  --yellow: #e3b341;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 80px 24px;
  min-height: 100vh;
}

.fs05__inner { max-width: 1100px; margin: 0 auto; }

.fs05__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.fs05__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--green);
  background: rgba(63,185,80,0.1);
  border: 1px solid rgba(63,185,80,0.25);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.fs05__h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.fs05__h2 em { font-style: normal; color: var(--blue); }

.fs05__p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 28px;
}

.fs05__cta-row { display: flex; gap: 10px; }

.fs05__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.fs05__btn:hover { opacity: 0.8; }
.fs05__btn--green { background: var(--green); color: #000; }
.fs05__btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* Code window */
.fs05__window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.fs05__win-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: #1c2028;
  border-bottom: 1px solid var(--border);
}

.fs05__win-tabs {
  display: flex;
}

.fs05__tab {
  padding: 10px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  cursor: pointer;
}

.fs05__tab--active {
  background: var(--surface);
  color: var(--text);
  border-bottom: 2px solid var(--blue);
  margin-bottom: -1px;
}

.fs05__win-dots {
  margin-left: auto;
  display: flex; gap: 6px;
  padding: 0 16px;
}

.fs05__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.fs05__dot:nth-child(1) { background: #ff5f57; }
.fs05__dot:nth-child(2) { background: #febc2e; }
.fs05__dot:nth-child(3) { background: #28c840; }

.fs05__code {
  padding: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

.fs05__ln { color: #3d444d; user-select: none; margin-right: 20px; }
.kw { color: var(--purple); }
.fn { color: var(--blue); }
.str { color: var(--orange); }
.cm { color: #8b949e; font-style: italic; }
.num { color: var(--green); }
.prop { color: var(--blue); }
.var { color: var(--red); }
.obj { color: var(--yellow); }

/* Feature grid below */
.fs05__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.fs05__feat {
  background: var(--surface);
  padding: 28px;
  transition: background 0.2s;
}

.fs05__feat:hover { background: #1c2028; }

.fs05__feat-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.fs05__feat:nth-child(1) .fs05__feat-icon { background: rgba(63,185,80,0.15); }
.fs05__feat:nth-child(2) .fs05__feat-icon { background: rgba(121,192,255,0.15); }
.fs05__feat:nth-child(3) .fs05__feat-icon { background: rgba(210,168,255,0.15); }
.fs05__feat:nth-child(4) .fs05__feat-icon { background: rgba(255,166,87,0.15); }

.fs05__feat-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.fs05__feat-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.fs05__feat-badge {
  display: inline-block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
}

.fs05__feat:nth-child(1) .fs05__feat-badge { background: rgba(63,185,80,0.15); color: var(--green); }
.fs05__feat:nth-child(2) .fs05__feat-badge { background: rgba(121,192,255,0.15); color: var(--blue); }
.fs05__feat:nth-child(3) .fs05__feat-badge { background: rgba(210,168,255,0.15); color: var(--purple); }
.fs05__feat:nth-child(4) .fs05__feat-badge { background: rgba(255,166,87,0.15); color: var(--orange); }

@media (max-width: 800px) {
  .fs05__top { grid-template-columns: 1fr; }
  .fs05__features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .fs05__features { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs05__btn, .fs05__feat { transition: none; }
}

More from 10 CSS Feature Sections

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

Search CodeFronts

Loading…

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