Ideas

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

Separadores de cuaderno de anillas

Pestañas de cartulina de colores asoman por el borde de un cuaderno rayado y la hoja pasa al elegir otra.

Ajustes

16px
1x

Código

<div class="uvq12-bt"><div class="tbs" role="tablist" aria-label="Cuaderno" 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>Ideas</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>Tareas</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>Lecturas</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>Recetas</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>Ideas</h4><ul><li>App para regar plantas</li><li>Taller de cerámica</li><li>Mapa de cafés</li></ul></div><div class="pn" style="--t:#bbf7d0" role="tabpanel" id="uvq12-bt-p1" aria-labelledby="uvq12-bt-t1" hidden><h4>Tareas</h4><ul><li>Llamar al fontanero</li><li>Pagar el seguro</li><li>Comprar sobres</li></ul></div><div class="pn" style="--t:#bfdbfe" role="tabpanel" id="uvq12-bt-p2" aria-labelledby="uvq12-bt-t2" hidden><h4>Lecturas</h4><ul><li>Novela de verano</li><li>Poemas de Lorca</li><li>Guía de setas</li></ul></div><div class="pn" style="--t:#fecaca" role="tabpanel" id="uvq12-bt-p3" aria-labelledby="uvq12-bt-t3" hidden><h4>Recetas</h4><ul><li>Gazpacho de fresa</li><li>Pan de centeno</li><li>Arroz al horno</li></ul></div></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Navegación

Ver todos: Navegación

Dónde usarlo

Separadores de archivador: pestañas de cartulina pastel asoman por el borde de una hoja rayada con agujeros y margen rojo. La pestaña elegida se adelanta y la hoja gira un poco mientras aparece la nueva lista con letra manuscrita. Es CSS con un script de pestañas, pensado para apps de notas, agendas, webs de recetas y paneles personales.

Da a cada pestaña su propio color en los datos y usa el color principal para la tinta. En las etiquetas verticales funcionan mejor palabras cortas, y de tres a cinco pestañas dejan el borde ordenado.