Ideas
- App para regar plantas
- Taller de cerámica
- Mapa de cafés
Tareas
- Llamar al fontanero
- Pagar el seguro
- Comprar sobres
Lecturas
- Novela de verano
- Poemas de Lorca
- Guía de setas
Recetas
- Gazpacho de fresa
- Pan de centeno
- Arroz al horno
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
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.
Más en Navegación
Ver todos: NavegaciónDó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.