Tag cloud filter
Tags in different sizes that grow on hover and switch on with a small pop when clicked.
Settings
Code
<div class="uv-ftc"><button style="--z:1.5">design</button><button style="--z:1.15">react</button><button style="--z:1">typography</button><button style="--z:1.35">css</button><button style="--z:1.2">animation</button><button style="--z:0.95">ui</button><button style="--z:1.1">3d</button><button style="--z:1.25">color</button><button style="--z:0.9">iconos</button><button style="--z:1.05">oscuro</button><button style="--z:1">grid</button><button style="--z:1.3">glass</button></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 tag cloud gives a blog archive some personality. On a design blog, bigger words like “typography” or “CSS” show what the site writes about most, and clicking a few narrows the posts. It also suits a personal notes site or a recipe collection. If you're after a clickable tag cloud or topic filter in CSS, this does the job.
Size should reflect something real, like the number of posts per tag. Keep it to fifteen or twenty tags; a cloud of eighty is just noise. On phones the size differences shrink, so check that small tags are still easy to tap.