Tabs

details elements that share a name, laid out as tabs. No JavaScript.

Wrap the details in .tabs and give them the same name, so only one opens at a time. The summaries become the tab row. Browsers without ::details-content show an accordion instead. The open tab ignores clicks, but Enter or Space on it still closes it, since only a script can stop that.

Monthly

$12 a month, cancel any time.

Yearly

$120 a year, two months free.

Lifetime

Pay once, use it forever.

Colors

A color class on .tabs colors the line under the open tab.

HTML

Write the markup.

CSS

Override a variable.

Variables

Variable	Default
`--i-tabs-indicator-width`Underline of the open tab	`0.125rem`