Folder tabs
The active tab rises and joins the panel underneath, like the tab on a paper folder.
Settings
Code
<div class="uv-ftk"><div class="tb"><button class="on">Overview</button><button>Details</button><button>Notes</button></div><div class="pn">Panel content</div></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
Good for detailed pages where each tab hides real content. The product page of a hardware store, with Description, Specs and Shipping, or a client record in a small CRM with Summary, Details and Notes. Because tab and panel read as one piece, nobody wonders what belongs where. It's what most people mean by folder-style tabs in CSS.
The effect depends on the tab and the panel sharing exactly the same background, so change both together. It feels a little traditional, which is a plus for business tools and a minus for a playful brand.