Ideas

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

Intercalaires de classeur à anneaux

Des onglets en carton de couleur dépassent du bord d'un cahier ligné, et la page tourne quand on en choisit un autre.

Réglages

16px
1x

Code

<div class="uvq12-bt"><div class="tbs" role="tablist" aria-label="Cahier" 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>Idées</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>Tâches</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>Lectures</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>Recettes</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>Idées</h4><ul><li>App pour arroser les plantes</li><li>Atelier de céramique</li><li>Carte des cafés</li></ul></div><div class="pn" style="--t:#bbf7d0" role="tabpanel" id="uvq12-bt-p1" aria-labelledby="uvq12-bt-t1" hidden><h4>Tâches</h4><ul><li>Appeler le plombier</li><li>Payer l'assurance</li><li>Acheter des enveloppes</li></ul></div><div class="pn" style="--t:#bfdbfe" role="tabpanel" id="uvq12-bt-p2" aria-labelledby="uvq12-bt-t2" hidden><h4>Lectures</h4><ul><li>Roman d'été</li><li>Poèmes de Lorca</li><li>Guide des champignons</li></ul></div><div class="pn" style="--t:#fecaca" role="tabpanel" id="uvq12-bt-p3" aria-labelledby="uvq12-bt-t3" hidden><h4>Recettes</h4><ul><li>Gaspacho à la fraise</li><li>Pain de seigle</li><li>Riz au four</li></ul></div></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Navigation

Voir tout : Navigation

Où l’utiliser

Des intercalaires de classeur : des onglets en carton pastel dépassent d'une page lignée avec perforations et marge rouge. L'onglet choisi avance, la page pivote un peu et la nouvelle liste apparaît en écriture manuscrite. C'est du CSS avec un script d'onglets, pensé pour les apps de notes, les agendas, les sites de recettes et les tableaux de bord personnels.

Donne une couleur à chaque onglet dans les données et utilise la couleur principale pour l'encre. Les mots courts passent mieux sur les étiquettes verticales, et trois à cinq onglets gardent le bord net.