Reagenzgläser für Sorten
Ein Reagenzglasständer aus dem Labor: Jede gewählte Sorte füllt ihr Glas mit farbiger Flüssigkeit und aufsteigenden Bläschen.
Einstellungen
Code
<fieldset class="uvq05-tt"><legend>Sorten</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">Erdbeere</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">Minze</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">Heidelbeere</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">Pistazie</span></label><i class="bar" aria-hidden="true"></i></div><p class="ct"><span>Gewählte Sorten:</span> <span class="n"></span></p></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Eisdielen, Cocktailbars und Getränkemarken können einen Sortenfilter in ein kleines Experiment verwandeln. Jede Option ist ein gläsernes Reagenzglas in einem Stahlständer, gezeichnet mit CSS-Verläufen, und beim Anhaken steigt eine farbige Flüssigkeit mit Meniskus und einer Spur feiner Bläschen. Die Namen stehen darunter, ein Zähler hält die Auswahl fest.
Die erste Farbe färbt den Ständer, die zweite tönt das Glas. Lege die Farbe jeder Flüssigkeit im Markup fest, ersetze Sorten durch Düfte oder Zutaten und bleib bei fünf oder sechs Gläsern, damit alles aufs Handy passt.