The feature-tabs showcase is the product-marketing pattern where one section presents several capabilities behind a row of tabs — click a tab and the copy plus an illustrative graphic swap in. This snippet builds the complete interaction in plain HTML, CSS, and vanilla JavaScript: a sliding gradient indicator that glides under the active tab, panels that fade and lift as they enter, distinct artwork per feature, and full keyboard support.

The sliding gradient indicator

The tab strip contains the three buttons plus a single .ft-ink element absolutely positioned behind them. On every activation, moveInk reads the chosen tab's offsetLeft and offsetWidth and writes them as a translateX and width, so the gradient pill slides to sit exactly under the active tab. Because it animates transform and width with a cubic-bezier ease, the indicator glides smoothly between tabs of different widths instead of snapping. The active tab's text turns white while inactive labels stay muted, reinforcing the selection.

Panel swaps that animate in

Each panel is laid out as a two-column grid: descriptive copy with a checkmarked feature list on one side, a custom illustration on the other. Switching panels is a two-step dance that makes the entrance animate. The outgoing panel loses its .active class and gets the hidden attribute; the incoming panel has hidden removed first, then — inside a requestAnimationFrame so the browser registers the visible state — gets .active added, which transitions it from opacity:0 and translateY(10px) to fully visible. Without that rAF gap, the browser would batch the changes and skip the transition.

Bespoke artwork per feature

Rather than placeholder images, each panel ships a tiny CSS illustration: the Analytics tab animates a row of bars that grow from zero with a ftGrow keyframe; the Automation tab draws nodes connected by gradient wires; the Collaboration tab shows a cluster of mention chips with an overflow "+4". These are pure HTML and CSS, so they stay crisp at any size and weigh nothing. Swap them for real screenshots by replacing the .ft-art contents.

Keyboard and ARIA

The strip is a role="tablist" of role="tab" buttons, each with aria-selected that flips on change, and each panel is a role="tabpanel". Arrow keys move focus and selection: ArrowRight and ArrowLeft wrap around the tab list and activate the newly focused tab, matching the WAI-ARIA tabs pattern so keyboard and screen-reader users get the same experience as mouse users.

Staying aligned

Tab widths depend on their text and the viewport, so a resize listener re-measures and repositions the indicator under the current active tab. On first paint the indicator is placed inside a requestAnimationFrame to ensure the tabs have been laid out before offsetLeft is read.

Customizing it

Add a fourth tab by copying a button and a panel and the logic adapts automatically — tabs and panels are read from the DOM. Recolor the indicator gradient to match your brand, replace the CSS artwork with product screenshots, or change the panel grid to stack copy above art. On screens under 560px the tabs stretch full width and the panels collapse to a single column. Pair it with a testimonial wall below or a pricing toggle to round out a feature page.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the double requestAnimationFrame trick from first principles. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the incoming panel needs its hidden attribute removed before the active class is added inside a requestAnimationFrame, and what would happen visually if both changes were applied in the same synchronous tick. The same assistant can help optimize it — ask whether reading offsetLeft and offsetWidth on every single activation and resize is expensive enough to matter with many tabs, and whether the resize listener should be debounced. It's also useful for extending the showcase: ask it to make the sliding indicator also animate its height for a vertical tab variant, replace the CSS-only bar-chart and node-wire illustrations with real animated SVG artwork, or add swipe gesture support so the panels can be paged through on touch devices. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a tabbed feature showcase in plain HTML, CSS, and JavaScript with a sliding indicator and animated panel transitions — no library.

Requirements:
- A row of tab buttons inside a role tablist container, with a single absolutely-positioned "ink" element behind them that represents the currently active tab.
- On every tab activation (including the very first paint), measure the newly active tab's offsetLeft and offsetWidth and apply them to the ink element as a translateX transform and a width value, with a CSS transition on both transform and width using an easing curve, so the indicator visibly glides between tabs of different widths rather than snapping.
- Each tab must correspond to a content panel; switching tabs must hide the previously active panel and reveal the new one using a combination of the native hidden attribute (to remove it from layout and accessibility trees) and an opacity/transform CSS transition for the visual fade-and-lift entrance.
- The fade-and-lift entrance must only play correctly by removing the hidden attribute first, then adding the class that triggers the transition inside a requestAnimationFrame callback — explain why doing both in the same synchronous step would cause the browser to skip the animation entirely.
- Include at least one small CSS-only illustration per panel built from plain divs (for example animated bars growing from zero height via a keyframe, or a chain of connected node elements) rather than image assets, so each panel has distinct bespoke artwork with zero network weight.
- Wire full keyboard support: ArrowRight and ArrowLeft must move focus and activate the next or previous tab, wrapping around at both ends of the tab list, matching the WAI-ARIA tabs authoring pattern with aria-selected kept in sync on every tab button.
- Add a window resize listener that re-measures and repositions the indicator under whichever tab is currently active, since tab widths may depend on viewport size or font rendering.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA three-tab feature section renders with the first tab active.
2
Click a tabThe gradient indicator slides under it and the panel swaps in.
3
Watch the entranceThe new panel fades and lifts into place; bars or wires animate.
4
Use arrow keysLeft and right move focus and selection between tabs.
5
Resize the windowThe indicator re-measures to stay under the active tab.
6
Swap in real artReplace the CSS illustrations with product screenshots.

Real-world uses

Common Use Cases

Product feature pages

Headline capabilities above a testimonial wall.

SaaS landing pages

Pair with a pricing toggle section.

App marketing

Show screens beside a phone mockup.

Docs overviews

Group capability docs like an animated tabs panel.

Comparison sections

Lead into a comparison table of plans.

Accessible tabs demo

A reference for the WAI-ARIA tabs keyboard pattern.

Got questions?

Frequently Asked Questions

A single absolutely-positioned ink element sits behind the buttons. moveInk reads the active tab's offsetLeft and offsetWidth and applies them as translateX and width, animating transform and width with a cubic-bezier ease so the gradient pill glides between tabs of different widths rather than snapping.

The incoming panel starts hidden at opacity:0 and translateY(10px). If you removed hidden and added the active class in the same tick, the browser would batch both and skip the transition. Removing hidden first, then adding active inside a requestAnimationFrame, lets the browser paint the hidden-but-visible start state so the fade-and-lift actually animates.

No — each panel's art is pure HTML and CSS. The analytics bars grow from zero with a keyframe, the automation nodes connect via gradient wire divs, and the collaboration chips are styled spans. They stay sharp at any resolution and add no network weight. Replace the .ft-art contents with screenshots if you prefer real imagery.

Yes. The strip uses the WAI-ARIA tabs pattern: a tablist of tab buttons with aria-selected and tabpanels. ArrowRight and ArrowLeft move focus and activate the next or previous tab, wrapping around the ends, so keyboard and screen-reader users get the same behavior as mouse users.

Keep an activeIndex in state and render tabs and panels from arrays. Compute the indicator position from a ref to the active tab in a layout effect (useLayoutEffect / onMounted / ngAfterViewInit) and recompute on resize. Conditionally render or toggle a CSS class for the active panel instead of the hidden attribute. In Tailwind, build the indicator with an absolute gradient element and transition-transform.

Loading…