12 CSS Code Blocks 10 / 12

Split-Pane Code + Live Preview Container

A two-pane CSS Grid card: the left pane renders a live interactive gradient button (with working hover lift + press feedback), the right pane shows the styled <code>&lt;pre&gt;&lt;code&gt;</code> source that produced it.

Best fordocumentation tutorials, design-system component reference pages, MDX-driven docs sites, and any teaching context where reading the code is half the story and seeing it run is the other half.

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

The code

<section class="ccb-spl" aria-label="Split-pane code and live preview demo">
  <div class="ccb-spl__wrap">
    <div class="ccb-spl__split">
      <div class="ccb-spl__preview">
        <button class="ccb-spl__demo-btn" type="button">Get Started →</button>
      </div>
      <div class="ccb-spl__codepane">
        <div class="ccb-spl__codehead">Result + Source <span class="ccb-spl__tag">.demo-btn</span></div>
        <pre class="ccb-spl__pre"><code><span class="ccb-spl__p">.demo-btn</span> {
  <span class="ccb-spl__k">background</span>: <span class="ccb-spl__s">linear-gradient(135deg,#7c5cff,#b16cff)</span>;
  <span class="ccb-spl__k">padding</span>: <span class="ccb-spl__s">14px 30px</span>;
  <span class="ccb-spl__k">border-radius</span>: <span class="ccb-spl__s">12px</span>;
  <span class="ccb-spl__k">box-shadow</span>: <span class="ccb-spl__s">0 10px 30px -8px rgba(124,92,255,.7)</span>;
}</code></pre>
      </div>
    </div>
  </div>
</section>
/* ─── 10 Split-Pane Code + Live Preview Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;700&display=swap');

.ccb-spl {
  --ccb-spl-bg: #0f1115;
  --ccb-spl-code-bg: #15181f;
  --ccb-spl-preview-bg: #1b1f29;
  --ccb-spl-ink: #e6e9ef;
  --ccb-spl-muted: #828b9c;
  --ccb-spl-accent: #7c5cff;
  --ccb-spl-line: rgba(255,255,255,.07);

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(124,92,255,.12), transparent 55%),
    var(--ccb-spl-bg);
  color: var(--ccb-spl-ink);
  font-family: 'Geist', 'Segoe UI', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-spl *, .ccb-spl *::before, .ccb-spl *::after { box-sizing: border-box; }

.ccb-spl__wrap { width: 100%; max-width: 700px; }
.ccb-spl__split {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ccb-spl-code-bg);
  border: 1px solid var(--ccb-spl-line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
@media (max-width: 680px) {
  .ccb-spl__split   { grid-template-columns: 1fr; }
  .ccb-spl__preview { border-right: none; border-bottom: 1px solid var(--ccb-spl-line); }
}

.ccb-spl__preview {
  background:
    radial-gradient(circle at 30% 20%, rgba(124,92,255,.18), transparent 60%),
    var(--ccb-spl-preview-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  border-right: 1px solid var(--ccb-spl-line);
}
.ccb-spl__demo-btn {
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px;
  color: #fff; border: none; cursor: pointer;
  padding: 14px 30px; border-radius: 12px;
  background: linear-gradient(135deg, #7c5cff, #b16cff);
  box-shadow: 0 10px 30px -8px rgba(124,92,255,.7);
  transition: transform .2s, box-shadow .2s;
}
.ccb-spl__demo-btn:hover  { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(124,92,255,.9); }
.ccb-spl__demo-btn:active { transform: translateY(0); }
.ccb-spl__demo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ccb-spl__codepane { display: flex; flex-direction: column; }
.ccb-spl__codehead {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ccb-spl-line);
  font-family: 'Geist Mono', monospace;
  font-size: 12px; color: var(--ccb-spl-muted); letter-spacing: .05em;
}
.ccb-spl__tag { margin-left: auto; color: var(--ccb-spl-accent); }
.ccb-spl__pre {
  margin: 0; padding: 20px 20px; flex: 1;
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px; line-height: 1.85;
  color: #cdd4e0; overflow-x: auto;
}
.ccb-spl__k { color: #c4b5fd; }
.ccb-spl__p { color: #7dd3fc; }
.ccb-spl__s { color: #86efac; }
.ccb-spl__pre::-webkit-scrollbar       { height: 8px; }
.ccb-spl__pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-spl__demo-btn { transition: none; }
}

More from 12 CSS Code Blocks

Minimalist Light Mode / Editorial ThemeExpandable / Collapsible Code WrapperCode Block with Copy to Clipboard ButtonMinimalist Dark Mode Code BoxMac-Style Window ContainerCode Container with Line Numbers and Filename HeaderHorizontal Scroll & Word-Wrap Handling (Mobile Responsive)Glow-Effect & Neon Tech Code BlockGlassmorphism Code TerminalInline Code Snippet Pill StylingNeumorphic Embedded Code Box
View the full collection →

Search CodeFronts

Loading…

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