Pestañas subrayadas a pluma
Pestañas en cursiva serif con un trazo de tinta que se dibuja bajo la elegida y se borra en la anterior.
Ajustes
Código
<div class="uvq12-it"><div role="tablist" aria-label="Secciones"><button type="button" role="tab" id="uvq12-it-t0" aria-selected="true" aria-controls="uvq12-it-p0" tabindex="0"><span>Ensayos</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 7c18-4 30 3 48 0s32-3 48 1" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t1" aria-selected="false" aria-controls="uvq12-it-p1" tabindex="-1"><span>Notas</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M3 8c10-5 22 2 34-1s30-4 60 0" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t2" aria-selected="false" aria-controls="uvq12-it-p2" tabindex="-1"><span>Cartas</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 6c20 3 40-3 60 0s25 2 36-1" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t3" aria-selected="false" aria-controls="uvq12-it-p3" tabindex="-1"><span>Poemas</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 8c15-3 25 1 45-2s35 3 51 0" pathLength="1"/></svg></button></div><div class="pn" role="tabpanel" id="uvq12-it-p0" aria-labelledby="uvq12-it-t0">Doce textos breves sobre la ciudad y el ruido.</div><div class="pn" role="tabpanel" id="uvq12-it-p1" aria-labelledby="uvq12-it-t1" hidden>Apuntes sueltos, listas y frases oídas en el tren.</div><div class="pn" role="tabpanel" id="uvq12-it-p2" aria-labelledby="uvq12-it-t2" hidden>Correspondencia con amigos que viven lejos.</div><div class="pn" role="tabpanel" id="uvq12-it-p3" aria-labelledby="uvq12-it-t3" hidden>Versos cortos escritos de madrugada.</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
Pestañas con aire literario en cursiva serif, donde la activa recibe un subrayado de tinta hecho a mano. Al cambiar, el trazo anterior se borra desde su inicio y el nuevo se dibuja de izquierda a derecha, y al pasar el ratón aparece antes una línea tenue de lápiz. Cada trazo es un path SVG animado con stroke-dashoffset, ideal para blogs, revistas, portfolios y apps de escritura.
El color principal es la tinta y el secundario el lápiz de la vista previa. Cambia el path en los datos para que cada pestaña tenga su propio temblor, y deja las etiquetas en una o dos palabras.