Salidas
Pestañas con panel de paletas
Al elegir una pestaña, un panel de salidas de estación gira sus paletas letra a letra hasta escribir el nombre de la sección.
Ajustes
Código
<div class="uvq12-fb"><div class="bd"><p class="hd"><span>Salidas</span><time>10:45</time></p><div class="rw" aria-hidden="true"><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span></div><div class="pn" role="tabpanel" id="uvq12-fb-p0" aria-labelledby="uvq12-fb-t0">Andén 2</div><div class="pn" role="tabpanel" id="uvq12-fb-p1" aria-labelledby="uvq12-fb-t1" hidden>12 líneas</div><div class="pn" role="tabpanel" id="uvq12-fb-p2" aria-labelledby="uvq12-fb-t2" hidden>Cada 8 min</div><div class="pn" role="tabpanel" id="uvq12-fb-p3" aria-labelledby="uvq12-fb-t3" hidden>Desde 1,50 €</div></div><div role="tablist" aria-label="Salidas"><button type="button" role="tab" id="uvq12-fb-t0" aria-selected="true" aria-controls="uvq12-fb-p0" tabindex="0">Inicio</button><button type="button" role="tab" id="uvq12-fb-t1" aria-selected="false" aria-controls="uvq12-fb-p1" tabindex="-1">Rutas</button><button type="button" role="tab" id="uvq12-fb-t2" aria-selected="false" aria-controls="uvq12-fb-p2" tabindex="-1">Horarios</button><button type="button" role="tab" id="uvq12-fb-t3" aria-selected="false" aria-controls="uvq12-fb-p3" tabindex="-1">Tarifas</button></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 unidas a un panel de salidas de estación: al elegir una, cada casilla del panel pasa por caracteres al azar y se detiene en el nombre de la sección, una tras otra, con el reloj en marcha en la esquina. Debajo, una línea da un detalle breve de cada pestaña. Las letras salen del texto de la pestaña, así que siguen el idioma de la página.
El color principal pinta los caracteres y el secundario el panel. Diez casillas bastan para casi cualquier palabra; súbelas en los datos para nombres más largos y deja los detalles en pocas palabras.