Tabs Generator (Inline CSS Output)
Edit tabs (headings + content)
3 / 15
Tab 0 (index)
Tab 1 (index)
Tab 2 (index)
Generated HTML (inline styles only)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Accessible Tabs (Inline Styles)</title>
</head>
<body style="margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;line-height:1.45;background:#ffffff;color:#111827;">
<div style="max-width:960px;margin:40px auto;padding:20px;">
<h1 style="margin:0 0 14px 0;">Accessible Tabs</h1>
<div id="tablist" role="tablist" aria-label="Sample Tabs" style="display:flex;flex-wrap:wrap;gap:6px;background:#f3f4f6;padding:6px;border-radius:12px;">
<button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true" tabindex="0" style="appearance:none;border:0;background:transparent;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:#111827;outline-offset:2px;background:#ffffff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 0 0 2px rgba(0,0,0,0.02);" data-idx="0">Home</button>
<button role="tab" id="tab-2" aria-controls="panel-2" aria-selected="false" tabindex="-1" style="appearance:none;border:0;background:transparent;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:#111827;outline-offset:2px;" data-idx="1">Profile</button>
<button role="tab" id="tab-3" aria-controls="panel-3" aria-selected="false" tabindex="-1" style="appearance:none;border:0;background:transparent;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:#111827;outline-offset:2px;" data-idx="2">Settings</button>
</div>
<div style="margin-top:14px;position:relative;">
<section role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0" style="background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:16px;min-height:180px;">
<h2 style="margin-top:0">Home content</h2>
<p>Welcome to the Home tab.</p>
</section>
<section role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" style="background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:16px;min-height:180px;" hidden>
<h2 style="margin-top:0">Profile content</h2>
<p>Your profile details go here.</p>
</section>
<section role="tabpanel" id="panel-3" aria-labelledby="tab-3" tabindex="0" style="background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:16px;min-height:180px;" hidden>
<h2 style="margin-top:0">Settings content</h2>
<p>Adjust your preferences.</p>
</section>
</div>
</div>
<script>(() => {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const tablist = document.getElementById('tablist');
if (!tablist) return;
const tabs = Array.from(tablist.querySelectorAll('button'));
const panels = tabs.map((t, i) => document.getElementById('panel-' + (i+1)));
let active = 0;
function applyDarkStyles() {
if (!prefersDark) return;
tabs.forEach((t, i) => {
t.style.color = '#e5e7eb';
if (i === active) t.style.background = '#0b0f1a';
});
panels.forEach(p => { if (p) { p.style.background = '#0b0f1a'; p.style.borderColor = 'rgba(255,255,255,.08)'; p.style.color = '#e5e7eb'; } });
document.body.style.background = '#0b0f1a';
document.body.style.color = '#e5e7eb';
}
function setActive(next, focus = true){
if (next === active) return;
active = next;
tabs.forEach((t, i) => {
const selected = i === active;
t.setAttribute('aria-selected', String(selected)); t.setAttribute('tabindex', selected ? '0' : '-1');
t.style.background = selected ? (prefersDark ? '#0b0f1a' : '#ffffff') : 'transparent';
t.style.boxShadow = selected ? '0 1px 0 rgba(0,0,0,.04),0 0 0 2px rgba(0,0,0,0.02)' : 'none';
});
panels.forEach((p, i) => {
if (!p) return;
const show = i === active;
if (show) {
p.removeAttribute('hidden');
if ('fade' === 'fade') {
p.style.opacity = '0.001';
requestAnimationFrame(() => {
p.style.transition = 'opacity .25s';
p.style.opacity = '1';
setTimeout(() => { p.style.transition = ''; }, 260);
});
} else if ('fade' === 'slide') {
p.style.opacity = '0.001';
p.style.transform = 'translateY(4px)';
requestAnimationFrame(() => {
p.style.transition = 'opacity .25s, transform .25s';
p.style.opacity = '1';
p.style.transform = 'none';
setTimeout(() => { p.style.transition = ''; }, 260);
});
}
} else {
p.setAttribute('hidden','');
}
});
if (focus && tabs[active]) tabs[active].focus();
}
tabs.forEach((t, i) => {
const selected = i === active;
t.setAttribute('aria-selected', String(selected)); t.setAttribute('tabindex', selected ? '0' : '-1');
if (selected) {
t.style.background = prefersDark ? '#0b0f1a' : '#ffffff';
t.style.boxShadow = '0 1px 0 rgba(0,0,0,.04),0 0 0 2px rgba(0,0,0,0.02)';
}
});
tabs.forEach((t, i) => t.addEventListener('click', () => setActive(i, false)));
tablist.addEventListener('keydown', (e) => {
const key = e.key;
if (['ArrowLeft','ArrowRight','Home','End'].includes(key)) e.preventDefault();
if (key === 'ArrowRight') setActive((active + 1) % tabs.length);
if (key === 'ArrowLeft') setActive((active - 1 + tabs.length) % tabs.length);
if (key === 'Home') setActive(0);
if (key === 'End') setActive(tabs.length - 1);
});
applyDarkStyles();
})();</script>
</body>
</html>