Pestañas de palanca de cambios
Las secciones de una consola de coche se eligen deslizando un pomo cromado por una guía, con una pantalla ámbar que parpadea al cambiar.
Ajustes
Código
<div class="uvq12-gg"><div class="sc"><div class="pn" role="tabpanel" id="uvq12-gg-p0" aria-labelledby="uvq12-gg-t0"><b>Mapa</b><span>Estación Norte · 12 min</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p1" aria-labelledby="uvq12-gg-t1" hidden><b>Audio</b><span>Radio 3 · Jazz</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p2" aria-labelledby="uvq12-gg-t2" hidden><b>Clima</b><span>21,5 °C · 2 zonas</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p3" aria-labelledby="uvq12-gg-t3" hidden><b>Vehículo</b><span>Autonomía 412 km</span></div></div><div class="gt" role="tablist" aria-label="Consola"><span class="sl" aria-hidden="true"></span><span class="kn" aria-hidden="true"></span><button type="button" role="tab" id="uvq12-gg-t0" aria-selected="true" aria-controls="uvq12-gg-p0" tabindex="0" aria-label="Mapa"><b aria-hidden="true">M</b></button><button type="button" role="tab" id="uvq12-gg-t1" aria-selected="false" aria-controls="uvq12-gg-p1" tabindex="-1" aria-label="Audio"><b aria-hidden="true">A</b></button><button type="button" role="tab" id="uvq12-gg-t2" aria-selected="false" aria-controls="uvq12-gg-p2" tabindex="-1" aria-label="Clima"><b aria-hidden="true">C</b></button><button type="button" role="tab" id="uvq12-gg-t3" aria-selected="false" aria-controls="uvq12-gg-p3" tabindex="-1" aria-label="Vehículo"><b aria-hidden="true">V</b></button></div><small>Consola</small></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
Estas pestañas toman la palanca de un coche automático: un pomo cromado se desliza por una ranura oscura y se detiene bajo la letra elegida, mientras una pantalla ámbar parpadea y muestra la sección. Es HTML y CSS con un pequeño script para arrastrar, y encaja en apps de coche, paneles domóticos y cuadros de mando con aire de hardware.
Cambia el color principal para pasar del ámbar a un azul hielo o un rojo, y el secundario para teñir la consola. Deja las letras en un solo carácter y pon los nombres completos dentro de la pantalla.