Pure CSS Tabs

<!-- Pure CSS Tabs — radio-driven, zero JS -->
<div class="nuda-css-tabs">
  <input class="nuda-css-tabs__radio" type="radio" name="nuda-css-tabs" id="nuda-css-tab-r1" checked />
  <input class="nuda-css-tabs__radio" type="radio" name="nuda-css-tabs" id="nuda-css-tab-r2" />
  <div class="nuda-css-tabs__bar">
    <label class="nuda-css-tabs__tab" for="nuda-css-tab-r1">Overview</label>
    <label class="nuda-css-tabs__tab" for="nuda-css-tab-r2">Details</label>
  </div>
  <div class="nuda-css-tabs__panel nuda-css-tabs__panel--1">Overview panel content.</div>
  <div class="nuda-css-tabs__panel nuda-css-tabs__panel--2">Details panel content.</div>
</div>

/* Pure CSS Tabs
   Hidden radios + sibling selectors switch panels. No JS.
   Customize: --nuda-css-tab-accent */

.nuda-css-tabs {
  --nuda-css-tab-accent: #e4ff54;
  max-width: 480px;
}

.nuda-css-tabs__bar {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}

/* Visually-hidden native radios (still focusable) */
.nuda-css-tabs__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

.nuda-css-tabs__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.nuda-css-tabs__tab:hover { color: #ccc; }

.nuda-css-tabs__panel {
  display: none;
  margin-top: 0.5rem;
  padding: 1rem;
  font-size: 0.85rem;
  color: #bbb;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  animation: nuda-css-tab-fade 0.3s ease-out;
}

/* Keyboard focus ring on the visible label */
.nuda-css-tabs__radio:focus-visible + .nuda-css-tabs__bar label {
  outline: 2px solid var(--nuda-css-tab-accent);
  outline-offset: 2px;
}

/* Active tab + matching panel */
#nuda-css-tab-r1:checked ~ .nuda-css-tabs__bar label[for="nuda-css-tab-r1"],
#nuda-css-tab-r2:checked ~ .nuda-css-tabs__bar label[for="nuda-css-tab-r2"] {
  background: var(--nuda-css-tab-accent);
  color: #09090b;
  font-weight: 700;
}

#nuda-css-tab-r1:checked ~ .nuda-css-tabs__panel--1,
#nuda-css-tab-r2:checked ~ .nuda-css-tabs__panel--2 {
  display: block;
}

@keyframes nuda-css-tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-css-tabs__panel { animation: none; }
}