Ideas

  • App para regar plantas
  • Taller de cerámica
  • Mapa de cafés
HTML + CSSNavigation

Register eines Ringbuchs

Farbige Kartonreiter ragen aus dem Rand eines linierten Hefts, und die Seite blättert um, wenn du einen anderen wählst.

Einstellungen

16px
1x

Code

<div class="uvq12-bt"><div class="tbs" role="tablist" aria-label="Notizbuch" aria-orientation="vertical"><button type="button" role="tab" id="uvq12-bt-t0" aria-selected="true" aria-controls="uvq12-bt-p0" tabindex="0" style="--t:#fde68a"><span>Ideen</span></button><button type="button" role="tab" id="uvq12-bt-t1" aria-selected="false" aria-controls="uvq12-bt-p1" tabindex="-1" style="--t:#bbf7d0"><span>Aufgaben</span></button><button type="button" role="tab" id="uvq12-bt-t2" aria-selected="false" aria-controls="uvq12-bt-p2" tabindex="-1" style="--t:#bfdbfe"><span>Lektüre</span></button><button type="button" role="tab" id="uvq12-bt-t3" aria-selected="false" aria-controls="uvq12-bt-p3" tabindex="-1" style="--t:#fecaca"><span>Rezepte</span></button></div><div class="pg"><span class="ho" aria-hidden="true"></span><div class="pn" style="--t:#fde68a" role="tabpanel" id="uvq12-bt-p0" aria-labelledby="uvq12-bt-t0"><h4>Ideen</h4><ul><li>App zum Pflanzengießen</li><li>Töpferworkshop</li><li>Café-Karte</li></ul></div><div class="pn" style="--t:#bbf7d0" role="tabpanel" id="uvq12-bt-p1" aria-labelledby="uvq12-bt-t1" hidden><h4>Aufgaben</h4><ul><li>Klempner anrufen</li><li>Versicherung bezahlen</li><li>Umschläge kaufen</li></ul></div><div class="pn" style="--t:#bfdbfe" role="tabpanel" id="uvq12-bt-p2" aria-labelledby="uvq12-bt-t2" hidden><h4>Lektüre</h4><ul><li>Sommerroman</li><li>Gedichte von Lorca</li><li>Pilzführer</li></ul></div><div class="pn" style="--t:#fecaca" role="tabpanel" id="uvq12-bt-p3" aria-labelledby="uvq12-bt-t3" hidden><h4>Rezepte</h4><ul><li>Erdbeer-Gazpacho</li><li>Roggenbrot</li><li>Ofenreis</li></ul></div></div></div>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Navigation

Alle ansehen: Navigation

Wofür du ihn nutzen kannst

Trennblätter aus dem Ringordner: Pastellfarbene Kartonreiter ragen aus einer linierten Seite mit Lochung und rotem Rand. Der gewählte Reiter rückt vor, die Seite dreht sich leicht, und die neue Liste erscheint in Handschrift. Reines CSS mit einem Tab-Skript, gedacht für Notiz-Apps, Planer, Rezeptseiten und persönliche Dashboards.

Gib jedem Reiter in den Daten eine eigene Farbe und nutze die Hauptfarbe für die Tinte. Kurze Wörter lesen sich auf den senkrechten Beschriftungen am besten, drei bis fünf Reiter halten den Rand ordentlich.