Tabbed Sidebar — Live CSS Playground

{CF} CodeFronts Back to CSS Sidebar Layouts Tabbed Sidebar Pure CSS

.sb-tab {
  display: grid; grid-template-columns: 280px 1fr;
  min-height: 480px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  background: #282a36; color: #f8f8f2;
  border-radius: 8px; overflow: hidden;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
.sb-tab-side { background: #21222c; border-right: 1px solid #44475a; display: flex; flex-direction: column; }
.sb-tab-titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #191a21; border-bottom: 1px solid #44475a; }
.sb-tab-titlebar span { display: flex; gap: 6px; }
.sb-tab-titlebar i { width: 11px; height: 11px; border-radius: 50%; }
.sb-tab-titlebar i:nth-child(1) { background: #ff5555; }
.sb-tab-titlebar i:nth-child(2) { background: #f1fa8c; }
.sb-tab-titlebar i:nth-child(3) { background: #50fa7b; }
.sb-tab-titlebar strong { font-size: 11px; font-weight: 500; color: #6272a4; letter-spacing: 0.04em; }
.sb-tab-tabs {
  display: flex; padding: 0;
  background: #21222c; border-bottom: 1px solid #44475a;
}
.sb-tab-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-tab-tabs input:focus-visible + label { outline: 2px solid #ff79c6; outline-offset: -2px; }
.sb-tab-tabs label {
  flex: 1; padding: 10px 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #6272a4;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.sb-tab-tabs label span { color: #ff79c6; font-size: 12px; }
.sb-tab-tabs label em { margin-left: 4px; font-size: 9.5px; font-style: normal; padding: 1px 5px; border-radius: 8px; background: #ff5555; color: #f8f8f2; font-weight: 700; }
.sb-tab-tabs label:hover { color: #f8f8f2; background: rgba(98,114,164,0.1); }
.sb-tab-tabs input:checked + label { color: #f8f8f2; border-bottom-color: #50fa7b; background: #282a36; }
.sb-tab-pane { display: none; padding: 14px 14px; flex: 1; overflow-y: auto; }
.sb-tab-side:has(#sb-tab-1:checked) [data-pane="1"] { display: block; }
.sb-tab-side:has(#sb-tab-2:checked) [data-pane="2"] { display: block; }
.sb-tab-side:has(#sb-tab-3:checked) [data-pane="3"] { display: block; }
.sb-tab-pane h3 { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6272a4; }
.sb-tab-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-tab-pane li { padding: 4px 6px; font-size: 12px; color: #f8f8f2; display: flex; align-items: center; gap: 8px; transition: background 0.12s; cursor: pointer; }
.sb-tab-pane li:hover { background: #44475a; }
.sb-tab-pane li::before { content: ''; flex-shrink: 0; }
.sb-tab-pane li.folder::before { content: '▸ '; color: #ff79c6; font-size: 10px; }
.sb-tab-pane li.file { padding-left: 22px; color: #bd93f9; }
.sb-tab-pane li.file::before { content: '▢ '; color: #6272a4; font-size: 10px; }
.sb-tab-pane li.file.ts { color: #8be9fd; }
.sb-tab-pane li.file.css { color: #ff79c6; }
.sb-tab-pane li.file.json { color: #f1fa8c; }
.sb-tab-pane li em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.sb-tab-pane li em.git-m { color: #ffb86c; background: rgba(255,184,108,0.15); }
.sb-tab-pane li em.git-a { color: #50fa7b; background: rgba(80,250,123,0.15); }
.sb-tab-search-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #282a36; border: 1px solid #44475a; border-radius: 4px; }
.sb-tab-search-row span { color: #6272a4; font-size: 13px; }
.sb-tab-search-row input { flex: 1; min-width: 0; background: transparent; border: 0; color: #f8f8f2; font-family: inherit; font-size: 12px; }
.sb-tab-search-row input:focus { outline: none; }
.sb-tab-pane p { margin: 10px 0 0; font-size: 11px; color: #6272a4; line-height: 1.6; }
.sb-tab-pane kbd { font-family: inherit; padding: 1px 5px; background: #44475a; color: #f8f8f2; border-radius: 3px; font-size: 10px; font-weight: 600; }
.sb-tab-status { margin-top: auto; display: flex; justify-content: space-between; padding: 6px 12px; background: #ff79c6; color: #282a36; font-size: 10.5px; font-weight: 700; }
.sb-tab-status span { display: inline-flex; align-items: center; gap: 6px; }
.sb-tab-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.sb-tab-main { padding: 28px 32px; background: #282a36; display: flex; flex-direction: column; gap: 16px; }
.sb-tab-bar { display: flex; gap: 8px; }
.sb-tab-pill { padding: 4px 10px; font-size: 11px; font-weight: 600; background: #44475a; color: #f8f8f2; border-radius: 4px; }
.sb-tab-pill.ghost { background: transparent; border: 1px solid #44475a; color: #6272a4; }
.sb-tab-code {
  margin: 0; padding: 18px 22px;
  background: #21222c;
  border: 1px solid #44475a;
  border-radius: 6px;
  font-size: 13px; line-height: 1.7;
  color: #f8f8f2;
  white-space: pre-wrap;
}
.sb-tab-code .c { color: #6272a4; font-style: italic; }
.sb-tab-code .k { color: #ff79c6; }
.sb-tab-code .v { color: #50fa7b; }
.sb-tab-code .o { color: #ff79c6; }
.sb-tab-code .t { color: #8be9fd; }
.sb-tab-code .s { color: #f1fa8c; }
.sb-tab-main p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: #bd93f9; line-height: 1.65; max-width: 460px; }
.sb-tab-main code { color: #50fa7b; background: #21222c; padding: 1px 6px; border-radius: 3px; font-size: 12.5px; border: 1px solid #44475a; }

<div class="sb-tab">
  <aside class="sb-tab-side" aria-label="Primary">
    <header class="sb-tab-titlebar">
      <span aria-hidden="true"><i></i><i></i><i></i></span>
      <strong>~/projects/dracula</strong>
    </header>
    <div class="sb-tab-tabs" role="tablist">
      <input id="sb-tab-1" type="radio" name="sb-tab" checked />
      <label for="sb-tab-1" role="tab"><span aria-hidden="true">▤</span>Files</label>
      <input id="sb-tab-2" type="radio" name="sb-tab" />
      <label for="sb-tab-2" role="tab"><span aria-hidden="true">⌕</span>Search</label>
      <input id="sb-tab-3" type="radio" name="sb-tab" />
      <label for="sb-tab-3" role="tab"><span aria-hidden="true">◇</span>Git<em>3</em></label>
    </div>
    <div class="sb-tab-pane" data-pane="1">
      <h3>Explorer</h3>
      <ul>
        <li class="folder">src/</li>
        <li class="file ts">app.tsx</li>
        <li class="file ts">main.tsx</li>
        <li class="file css">styles.css</li>
        <li class="folder">public/</li>
        <li class="file">favicon.svg</li>
        <li class="file json">package.json</li>
        <li class="file">README.md</li>
      </ul>
    </div>
    <div class="sb-tab-pane" data-pane="2">
      <h3>Search</h3>
      <label class="sb-tab-search-row">
        <span aria-hidden="true">⌕</span>
        <input type="search" placeholder="Search project…" />
      </label>
      <p>Use <kbd>⌘F</kbd> in file · <kbd>⌘⇧F</kbd> for project search.</p>
    </div>
    <div class="sb-tab-pane" data-pane="3">
      <h3>Source control</h3>
      <ul>
        <li><em class="git-m">M</em>app.tsx</li>
        <li><em class="git-a">A</em>README.md</li>
        <li><em class="git-m">M</em>package.json</li>
      </ul>
    </div>
    <footer class="sb-tab-status">
      <span><i style="background:#ff79c6"></i>main</span>
      <span>0 ↓ · 2 ↑</span>
    </footer>
  </aside>
  <main class="sb-tab-main">
    <header class="sb-tab-bar">
      <span class="sb-tab-pill">app.tsx</span>
      <span class="sb-tab-pill ghost">+ 47</span>
      <span class="sb-tab-pill ghost">UTF-8</span>
    </header>
    <pre class="sb-tab-code"><code><span class="c">// Three tabs, zero JavaScript.</span>
<span class="k">const</span> <span class="v">app</span> = <span class="o">() =&gt;</span> {
  <span class="k">return</span> &lt;<span class="t">Sidebar</span> theme=<span class="s">"dracula"</span> /&gt;
}</code></pre>
    <p>Click the tabs at the top of the sidebar to swap between Files, Search, and Git. Pattern: radio inputs + <code>:has(#tab-1:checked)</code> + sibling selectors. Theme is the Dracula palette translated into a real layout.</p>
  </main>
</div>

Live preview Edit any tab — preview updates live Ready