Tabbed Specification Panel
Product specification tabs highlight on hover and switch real content when clicked.
Product specification tabs highlight on hover and switch real content when clicked.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<div class="tbx-1058"><input type="radio" id="tbx-1058-a" name="tbx-1058-tab" checked><input type="radio" id="tbx-1058-b" name="tbx-1058-tab"><input type="radio" id="tbx-1058-c" name="tbx-1058-tab"><div class="tbx-1058__tabs" role="group" aria-label="Switch product information"><label for="tbx-1058-a">Features</label><label for="tbx-1058-b">Specifications</label><label for="tbx-1058-c">Warranty</label></div><div class="tbx-1058__panel tbx-1058__a"><b>Clean, intuitive controls</b><p>Essential features in a simple product.</p></div><div class="tbx-1058__panel tbx-1058__b"><b>Product specifications</b><p>Weight 420g / Width 120mm / Height 80mm</p></div><div class="tbx-1058__panel tbx-1058__c"><b>Support</b><p>Includes a one-year warranty from purchase.</p></div></div>
CSS
.tbx-1058{font:12px/1.5 system-ui;width:min(278px,100%);color:#345064}.tbx-1058>input{position:absolute;opacity:0;width:1px;height:1px}.tbx-1058__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:#e9eff2;border-radius:8px}.tbx-1058__tabs label{text-align:center;padding:10px 2px;cursor:pointer;font-weight:700;font-size:11px;border-radius:6px;color:#647b89;transition:background .2s,color .2s,transform .2s}.tbx-1058__tabs label:is(:hover,:focus-visible){background:#d1e9e8;color:#226b70;transform:translateY(-1px)}
.tbx-1058:has(#tbx-1058-a:checked) label[for=tbx-1058-a],.tbx-1058:has(#tbx-1058-b:checked) label[for=tbx-1058-b],.tbx-1058:has(#tbx-1058-c:checked) label[for=tbx-1058-c]{background:white;color:#1d6571;box-shadow:0 2px 6px #254d6418}.tbx-1058:has(input:focus-visible) .tbx-1058__tabs{outline:2px solid #d4a46e;outline-offset:2px}
.tbx-1058__panel{display:none;padding:21px 12px 12px;min-height:93px}.tbx-1058__panel b{font-size:12px}.tbx-1058__panel p{font-size:11px;color:#748593;line-height:1.65;margin:7px 0 0}.tbx-1058:has(#tbx-1058-a:checked) .tbx-1058__a,.tbx-1058:has(#tbx-1058-b:checked) .tbx-1058__b,.tbx-1058:has(#tbx-1058-c:checked) .tbx-1058__c{display:block}
@media(prefers-reduced-motion:reduce){.tbx-1058__tabs label{transition:none}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for product showcases and service pages.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.