Filter bar with active tags
Dropdowns along the top, and each choice turns into a removable tag below that pops in and shrinks out.
Settings
Code
<div class="uv-ftb"><div class="rw"><div class="dd"><button class="tg">Category<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Design">Design</button><button data-v="Code">Code</button><button data-v="Photos">Photos</button></div></div><div class="dd"><button class="tg">Price<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Free">Free</button><button data-v="Premium">Premium</button></div></div><div class="dd"><button class="tg">Level<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Basic">Basic</button><button data-v="Advanced">Advanced</button></div></div></div><div class="tags"></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
A good layout for catalogues with wide grids, where a sidebar would eat space. An online course platform, say, with Category, Price and Level across the top. Every pick appears as a tag underneath, so people can see and undo their filters at a glance. It matches searches for a horizontal filter bar with removable chips.
Keep the dropdown labels fixed, like “Level”, and let the tags show the values. Add a “Clear all” link once there are three or more tags. If the row gets crowded, move the rarely used filters behind a “More” button.