Test tube flavour filter
A lab test tube rack: each flavour you pick fills its tube with coloured liquid and rising bubbles.
Settings
Code
<fieldset class="uvq05-tt"><legend>Flavours</legend><div class="rk"><label style="--l:#ff4d6d"><input type="checkbox" checked><span class="tb" aria-hidden="true"><i class="lq"></i><i class="bu"></i></span><span class="nm">Strawberry</span></label><label style="--l:#2ec4b6"><input type="checkbox"><span class="tb" aria-hidden="true"><i class="lq"></i><i class="bu"></i></span><span class="nm">Mint</span></label><label style="--l:#ffb703"><input type="checkbox"><span class="tb" aria-hidden="true"><i class="lq"></i><i class="bu"></i></span><span class="nm">Mango</span></label><label style="--l:#5a4fcf"><input type="checkbox" checked><span class="tb" aria-hidden="true"><i class="lq"></i><i class="bu"></i></span><span class="nm">Blueberry</span></label><label style="--l:#9bc53d"><input type="checkbox"><span class="tb" aria-hidden="true"><i class="lq"></i><i class="bu"></i></span><span class="nm">Pistachio</span></label><i class="bar" aria-hidden="true"></i></div><p class="ct"><span>Flavours chosen:</span> <span class="n"></span></p></fieldset>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
See all FiltersWhere to use it
Ice cream shops, cocktail bars and drink brands can turn a flavour filter into a small science experiment. Each option is a glass test tube in a steel rack, drawn with CSS gradients, and checking it raises a coloured liquid with a meniscus and a stream of tiny bubbles. Labels sit below and a counter tracks the chosen flavours.
The first colour paints the rack and the second tints the glass. Set each liquid colour in the markup, swap flavours for scents or ingredients, and keep five or six tubes so the rack fits on a phone screen.