HTML + CSSFilters
Tabs with sliding underline
A thin line slides under the active tab and stretches a little when you hover another one.
Settings
16px
1x
Code
<div class="uv-ftu"><button class="on">All</button><button>Design</button><button>Code</button><button>Photos</button><span class="l"></span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
The quiet choice for content sites. An online magazine switching between Latest, Culture, Travel and Food, or a recipe page separating ingredients from method. The underline follows the cursor and settles on the active tab, which feels tidy without drawing attention to itself. A solid base if you need animated tabs in CSS.
It relies on a thin line, so give the tab row enough contrast against the background. Pair it with a simple fade on the content below. Heavy panel animations would fight with how calm the tabs are.