32 CSS Tab Designs05 / 32

Pure CSSMIT licensed

VS Code Files

IDE-inspired file tabs with language-colored dots and editor chrome. The active tab lifts with a top accent stripe and matches the editor surface, just like VS Code. Pure CSS.

Published

Live Demo
Try it

The code

<div class="tt25">
  <nav class="tt25n">
    <input type="radio" name="tt25" id="tt25-r1" checked />
    <label class="tt25b" for="tt25-r1"
      ><span class="tt25dot" style="--c: #3178c6"></span>app.tsx</label
    >
    <input type="radio" name="tt25" id="tt25-r2" />
    <label class="tt25b" for="tt25-r2"
      ><span class="tt25dot" style="--c: #f0db4f"></span>config.js</label
    >
    <input type="radio" name="tt25" id="tt25-r3" />
    <label class="tt25b" for="tt25-r3"
      ><span class="tt25dot" style="--c: #264de4"></span>styles.css</label
    >
  </nav>
  <div class="tt25body">
    <div class="tt25p">// app.tsx<br />export default App;</div>
    <div class="tt25p">// config.js<br />module.exports = {};</div>
    <div class="tt25p">/* styles.css */<br />:root { color: white; }</div>
  </div>
</div>
.tt25 {
  background: #1e1e1e;
  padding: 0;
  font-family: ui-monospace, monospace;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
}

.tt25n {
  display: flex;
  background: #2d2d2d;
  border-bottom: 1px solid #1e1e1e;
  min-width: 0;
}

.tt25n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt25b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font: 12px/1 ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
  position: relative;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.tt25b:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}

.tt25dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}

.tt25n input:checked + .tt25b {
  background: #1e1e1e;
  color: #fff;
  border-bottom: 1px solid #1e1e1e;
  margin-bottom: -1px;
}

.tt25n input:checked + .tt25b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4fc1ff;
}

.tt25n input:focus-visible + .tt25b {
  outline: 1px dashed #4fc1ff;
  outline-offset: -3px;
}

.tt25body {
  padding: 18px 20px;
}

.tt25p {
  display: none;
  font: 12px/1.6 ui-monospace, monospace;
  color: #d4d4d4;
}

.tt25p:nth-of-type(1) {
  color: #569cd6;
}

.tt25:has(#tt25-r1:checked) .tt25p:nth-of-type(1),
.tt25:has(#tt25-r2:checked) .tt25p:nth-of-type(2),
.tt25:has(#tt25-r3:checked) .tt25p:nth-of-type(3) {
  display: block;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Tab Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: VS Code Files
Source: https://codefronts.com/navigation/css-tabs/vs-code-files/

IDE-inspired file tabs with language-colored dots and editor chrome. The active tab lifts with a top accent stripe and matches the editor surface, just like VS Code. Pure CSS.
## HTML
```html
<div class="tt25">
  <nav class="tt25n">
    <input type="radio" name="tt25" id="tt25-r1" checked />
    <label class="tt25b" for="tt25-r1"
      ><span class="tt25dot" style="--c: #3178c6"></span>app.tsx</label
    >
    <input type="radio" name="tt25" id="tt25-r2" />
    <label class="tt25b" for="tt25-r2"
      ><span class="tt25dot" style="--c: #f0db4f"></span>config.js</label
    >
    <input type="radio" name="tt25" id="tt25-r3" />
    <label class="tt25b" for="tt25-r3"
      ><span class="tt25dot" style="--c: #264de4"></span>styles.css</label
    >
  </nav>
  <div class="tt25body">
    <div class="tt25p">// app.tsx<br />export default App;</div>
    <div class="tt25p">// config.js<br />module.exports = {};</div>
    <div class="tt25p">/* styles.css */<br />:root { color: white; }</div>
  </div>
</div>
```
## CSS
```css
.tt25 {
  background: #1e1e1e;
  padding: 0;
  font-family: ui-monospace, monospace;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
}

.tt25n {
  display: flex;
  background: #2d2d2d;
  border-bottom: 1px solid #1e1e1e;
  min-width: 0;
}

.tt25n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt25b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font: 12px/1 ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
  position: relative;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.tt25b:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}

.tt25dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}

.tt25n input:checked + .tt25b {
  background: #1e1e1e;
  color: #fff;
  border-bottom: 1px solid #1e1e1e;
  margin-bottom: -1px;
}

.tt25n input:checked + .tt25b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4fc1ff;
}

.tt25n input:focus-visible + .tt25b {
  outline: 1px dashed #4fc1ff;
  outline-offset: -3px;
}

.tt25body {
  padding: 18px 20px;
}

.tt25p {
  display: none;
  font: 12px/1.6 ui-monospace, monospace;
  color: #d4d4d4;
}

.tt25p:nth-of-type(1) {
  color: #569cd6;
}

.tt25:has(#tt25-r1:checked) .tt25p:nth-of-type(1),
.tt25:has(#tt25-r2:checked) .tt25p:nth-of-type(2),
.tt25:has(#tt25-r3:checked) .tt25p:nth-of-type(3) {
  display: block;
}
```

How this works

The .tt25 shell paints VS Code's editor dark #1e1e1e, and .tt25n is a flex row on #2d2d2d chrome with a 1px solid #1e1e1e baseline separator — the exact two-tone stack Cursor and JetBrains lift from VS Code. Each tab is a hidden radio plus a .tt25b label with an 8px .tt25dot language dot fed by an inline --c custom property: TypeScript blue #3178c6 for app.tsx, JavaScript yellow #f0db4f for config.js, CSS blue #264de4 for styles.css. On check, the label background flips to #1e1e1e so it merges with the editor body, a margin-bottom: -1px punches through the chrome divider, and a ::before pseudo-element paints the 2px top accent bar in VS Code's action blue #4fc1ff.

Palette is not a choice, it is the reference: #1e1e1e body, #2d2d2d chrome, #4fc1ff accent, #d4d4d4 body text, #569cd6 for the first panel's keyword tint. Typography is ui-monospace, monospace at 12px/1 on tabs and 12px/1.6 on the body — no size delta, so the tab strip reads as chrome rather than heading. The .tt25dot uses flex-shrink: 0 so it never crushes when the filename ellipses.

Semantic radios keep the pattern SSR-safe with zero hydration cost, and the entire state change is a paint on the tab that received the click — INP stays flat and CLS is zero. Focus uses outline: 1px dashed #4fc1ff with outline-offset: -3px so the ring sits inside the tab like VS Code's own focus register, satisfying WCAG 2.4.7. Hover lifts the label to rgba(255, 255, 255, 0.85) and adds a rgba(255, 255, 255, 0.04) background wash. For an editor-tabs ARIA pattern, wrap the region with role="tablist", add role="tab" and aria-selected, and give panels role="tabpanel".

Make it yours

  • Retheme: swap #1e1e1e for JetBrains Darcula #2b2b2b or Cursor's warmer #181818, and match the chrome to a lighter shade. Recolor the ::before accent from #4fc1ff to match your editor's own action color.
  • Add a close-x on hover: append a .tt25close span, position absolute at right: 8px, and reveal via .tt25b:hover .tt25close { opacity: 1 }. Add a real button element inside the label if you wire click handling, so it stays keyboard-reachable.
  • Language dots: extend the inline --c map with Rust #dea584, Go #00ADD8, Python #3776ab, Ruby #cc342d, or Vue #41b883 to match your file mix.
  • Light-mode variant: flip to a VS Code Light theme — body #ffffff, chrome #f3f3f3, divider #e5e5e5, resting text rgba(0, 0, 0, 0.6), active text #333333, accent kept at #4fc1ff or dropped to #0078d4 for Windows fidelity.
  • Tailwind arbitrary values: bg-[#2d2d2d] on the nav, bg-[#1e1e1e] on the body and active tab, inline style setting --c per dot, and the accent pseudo via peer-checked pseudo-element utilities.

Gotchas — read before shipping

  • Resting label rgba(255, 255, 255, 0.6) on #2d2d2d chrome sits at the WCAG 1.4.3 line for 12px non-bold text. Hover lifts to 0.85, which passes, but audit the resting state against localised strings and consider bumping to 0.7 for tier-1 accessibility rigour.
  • The active tab merges with the editor body via margin-bottom: -1px. If a parent applies overflow: hidden, the negative margin gets clipped and the divider ghost reappears under the active tab. Keep the parent overflow visible or use border-bottom-color: transparent instead.
  • Radios do not announce as tabs to screen readers. Add the ARIA tabs pattern — role="tablist", role="tab", aria-selected, role="tabpanel", and Left/Right arrow-key nav with roving tabindex — for WCAG 2.1.1 and 4.1.2. VS Code itself uses this pattern in its web build.
  • On Next.js App Router with streaming SSR, the :has(#tt25-r1:checked) panel selector resolves after the shell paints; on Firefox 107 to 120 without :has(), no panel shows at all. Gate with @supports selector(:has(*)) or render all panels and toggle via a small hydration script.
  • The outline-offset: -3px inset focus ring can be clipped by the tab's own overflow: hidden if you add ellipsis. Keep overflow visible on the label or move ellipsis into an inner span, otherwise keyboard drivers lose the ring per WCAG 2.4.7.
  • Language dots at 8px are decorative but sit on the keyboard focus path if you make them interactive. Keep them presentation-only, or if you wire them for close-x hover, respect WCAG 2.5.5 target size — hit area should be at least 24 by 24 CSS pixels.

Browser support

ChromeSafariFirefoxEdge
105+15.4+121+105+

Tab chrome works everywhere; panel :has() switching needs Firefox 121, and CSS custom properties on the dot need no polyfill.

Techniques used in this demo

:has()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →