Feature Tabs
Tabbed feature panels with zero JavaScript, powered by hidden radio inputs. Duplicate the block? Rename the input ids and name.
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#18181b, #fafafa);
--color-accent: light-dark(#4f46e5, #818cf8);
--color-bg: light-dark(#ffffff, #0b0b0d);
--color-surface: light-dark(#f7f7f8, #161619);
--color-text: light-dark(#0a0a0c, #f5f5f6);
--color-text-muted: light-dark(#52525b, #a1a1aa);
--color-border: light-dark(#e4e4e7, #26262b);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.625rem;
--shadow: 0 1px 2px rgb(10 10 12 / 0.05), 0 4px 12px rgb(10 10 12 / 0.06), 0 16px 40px rgb(10 10 12 / 0.06);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#4f46e5, #818cf8);
--color-accent: light-dark(#a855f7, #c084fc);
--color-bg: light-dark(#ffffff, #0c0c18);
--color-surface: light-dark(#f5f5ff, #16162b);
--color-text: light-dark(#111127, #ececf6);
--color-text-muted: light-dark(#5a5a72, #9d9dbd);
--color-border: light-dark(#e4e4f2, #28284a);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.75rem;
--shadow: 0 1px 2px rgb(79 70 229 / 0.06), 0 6px 16px rgb(79 70 229 / 0.10), 0 20px 48px rgb(79 70 229 / 0.10);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#0d9488, #2dd4bf);
--color-accent: light-dark(#f97316, #fb923c);
--color-bg: light-dark(#fbfaf8, #171412);
--color-surface: light-dark(#f3f0ea, #221e1a);
--color-text: light-dark(#292524, #ece7e0);
--color-text-muted: light-dark(#6b6560, #a8a099);
--color-border: light-dark(#e5dfd6, #37312a);
--font-heading: Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.15;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 1rem;
--shadow: 0 2px 6px rgb(90 75 60 / 0.06), 0 10px 28px rgb(90 75 60 / 0.10);
--container-width: 1120px;
}
HTML
<section class="s-feature-tabs-radio">
<div class="ftb-inner">
<div class="ftb-head">
<span class="ftb-eyebrow">Workflow</span>
<h2>One tool, three jobs</h2>
</div>
<div class="ftb-tabs">
<input type="radio" name="ftb-tab" id="ftb-tab-1" checked />
<input type="radio" name="ftb-tab" id="ftb-tab-2" />
<input type="radio" name="ftb-tab" id="ftb-tab-3" />
<div class="ftb-labels">
<label for="ftb-tab-1">Design</label>
<label for="ftb-tab-2">Build</label>
<label for="ftb-tab-3">Ship</label>
</div>
<div class="ftb-panels">
<div class="ftb-panel">
<h3>Design with real constraints</h3>
<p>Work directly against your tokens so every choice you make survives contact with the codebase. No redlines, no translation loss.</p>
<div class="ftb-chips"><span>Tokens</span><span>Type scale</span><span>Spacing</span></div>
</div>
<div class="ftb-panel">
<h3>Build without a bundler</h3>
<p>Copy a block, paste it in, and it renders. There is no toolchain between you and the browser, which means nothing to break.</p>
<div class="ftb-chips"><span>Zero config</span><span>No build step</span><span>Vanilla CSS</span></div>
</div>
<div class="ftb-panel">
<h3>Ship two static files</h3>
<p>One HTML file and one stylesheet, hostable anywhere static files go. Deploys measured in seconds, not pipelines.</p>
<div class="ftb-chips"><span>index.html</span><span>styles.css</span><span>Done</span></div>
</div>
</div>
</div>
</div>
</section>CSS block only, works with any theme's tokens
.s-feature-tabs-radio {
background:
radial-gradient(42rem 20rem at 50% -12%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 60%),
var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
padding-block: var(--space-2xl);
}
.s-feature-tabs-radio .ftb-inner {
max-width: 820px;
margin-inline: auto;
padding-inline: var(--space-lg);
}
.s-feature-tabs-radio .ftb-head {
text-align: center;
margin-bottom: var(--space-lg);
}
.s-feature-tabs-radio .ftb-eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-sm);
}
.s-feature-tabs-radio .ftb-head h2 {
font-family: var(--font-heading);
text-wrap: balance;
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
margin: 0;
}
.s-feature-tabs-radio .ftb-tabs input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.s-feature-tabs-radio .ftb-labels {
display: flex;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-xs);
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
width: fit-content;
margin: 0 auto var(--space-lg);
}
.s-feature-tabs-radio .ftb-labels label {
padding: var(--space-sm) var(--space-lg);
border-radius: 999px;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.s-feature-tabs-radio .ftb-labels label:hover {
color: var(--color-text);
}
.s-feature-tabs-radio #ftb-tab-1:checked ~ .ftb-labels label[for='ftb-tab-1'],
.s-feature-tabs-radio #ftb-tab-2:checked ~ .ftb-labels label[for='ftb-tab-2'],
.s-feature-tabs-radio #ftb-tab-3:checked ~ .ftb-labels label[for='ftb-tab-3'] {
background: var(--color-primary);
color: var(--color-bg);
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.s-feature-tabs-radio .ftb-panel {
display: none;
padding: var(--space-xl);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-align: center;
}
.s-feature-tabs-radio #ftb-tab-1:checked ~ .ftb-panels .ftb-panel:nth-child(1),
.s-feature-tabs-radio #ftb-tab-2:checked ~ .ftb-panels .ftb-panel:nth-child(2),
.s-feature-tabs-radio #ftb-tab-3:checked ~ .ftb-panels .ftb-panel:nth-child(3) {
display: block;
}
.s-feature-tabs-radio .ftb-panel h3 {
font-family: var(--font-heading);
text-wrap: balance;
font-size: var(--text-xl);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
margin: 0 0 var(--space-sm);
}
.s-feature-tabs-radio .ftb-panel p {
font-size: var(--text-base);
line-height: var(--leading-normal);
text-wrap: pretty;
color: var(--color-text-muted);
margin: 0 auto var(--space-lg);
max-width: 52ch;
}
.s-feature-tabs-radio .ftb-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
}
.s-feature-tabs-radio .ftb-chips span {
padding: var(--space-xs) var(--space-md);
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg));
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.s-feature-tabs-radio input:focus-visible ~ .ftb-labels {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
Modern CSS in this block
Baseline 2024 — works in every up-to-date browser.
- color-mix()Newly availableMixing colors without a preprocessor
- text-wrap: balanceNewly availableBalanced headlines without manual line breaks
- text-wrap: prettyNewly availablePretty paragraph wrapping without orphan words
- :focus-visibleWidely availableFocus styles without annoying mouse users
Plus universally supported features: logical properties, custom properties. Baseline status is pulled from each feature's reference snippet.
More features blocks