Feature Spotlight Tabs — Free HTML CSS JS Snippet

Marketing pages need to explain several features without turning into an endless scroll. The feature-spotlight-tabs pattern solves this elegantly: a vertical list of feature tabs on one side, a large visual stage on the other, and selecting a tab swaps the visual to match. The visitor controls the pace, sees one feature at a time in detail, and the whole section stays compact. This is the layout Stripe, Notion, and most modern SaaS sites use for their "here's what it does" block. This component implements it in HTML, CSS, and vanilla JavaScript, driven by a single features array.

The two-column layout that stacks

The section is a CSS grid with a fixed 320px tab column and a flexible visual stage (grid-template-columns: 320px 1fr). align-items: start keeps the tab list from stretching to the stage's height. At 720px a media query collapses it to a single column and reorders the stage above the tabs with order: -1, so on mobile the visual leads and the tappable feature list follows — the natural reading order for a small screen.

Tabs with an animated accent rail

Each tab is a card with an icon tile, a title, and a one-line description. The active tab is marked three ways: a lifted shadow and tinted border, an icon tile that inverts to a filled accent colour, and an accent rail that grows down the left edge. That rail is a ::before pseudo-element scaled with transform: scaleY(0) to scaleY(1) and transform-origin: top, so it wipes in from the top when the tab activates rather than just appearing — a small motion detail that signals which feature is selected. Hovering any tab nudges it a couple of pixels right for tactile feedback.

Cross-fading the paired visual

Selecting a tab does not snap the visual — it cross-fades. The paint() function adds a .swap class that fades the stage to opacity: 0 and nudges it down 12px, then in a setTimeout it swaps the content and background and removes the class, easing the new visual back in. The timeout is matched to the CSS transition so the swap happens while the stage is invisible. Here the visuals are coloured gradient panels with a label, standing in for what would be product screenshots, animations, or videos in production.

Data-driven from one array

Everything is generated from a FEATURES array of { icon, title, desc, label, bg } objects. The script builds each tab — including its inline SVG icon — attaches the click handler, and renders the matching visual. Adding a feature is one array entry; there is no markup to duplicate and no risk of the tabs and visuals drifting out of sync because they share the same index. A guard in select() ignores clicks on the already-active tab so there is no needless re-fade.

Accessible tablist with keyboard support

The tabs use role="tab" inside a role="tablist" container, and the active tab carries aria-selected="true". The tab list listens for ArrowDown and ArrowUp and moves the selection (with wrap-around via modulo) plus focus to the next tab — the keyboard interaction screen-reader and keyboard users expect from a vertical tablist. Because every tab is a real <button>, it is focusable and clickable without any extra wiring.

Customisation

Replace the FEATURES array with your real features — give each an inline SVG icon path, a title, a description, and a visual. To use real media instead of gradient panels, set the visual to an <img> or <video> and swap the paint() function to change its src. Adjust the cross-fade timing (CSS transition plus the matching JS timeout), swap the #6366f1 accent used by the rail, active icon, and active border, and change the stage min-height to fit your visuals. To auto-advance like a carousel, add a setInterval that calls select((active + 1) % FEATURES.length) and pause it on hover.