MapaEstación Norte · 12 min
Consola
HTML + CSSNavigation

Tabs als Wählhebel

Bereiche einer Autokonsole wählst du, indem ein Chromknauf durch eine Kulisse gleitet; ein bernsteinfarbenes Display flackert bei jedem Wechsel.

Einstellungen

16px
1x

Code

<div class="uvq12-gg"><div class="sc"><div class="pn" role="tabpanel" id="uvq12-gg-p0" aria-labelledby="uvq12-gg-t0"><b>Karte</b><span>Nordbahnhof · 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>Klima</b><span>21,5 °C · 2 Zonen</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p3" aria-labelledby="uvq12-gg-t3" hidden><b>Fahrzeug</b><span>Reichweite 412 km</span></div></div><div class="gt" role="tablist" aria-label="Konsole"><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="Karte"><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="Klima"><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="Fahrzeug"><b aria-hidden="true">V</b></button></div><small>Konsole</small></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Navigation

Alle ansehen: Navigation

Wofür du ihn nutzen kannst

Diese Tabs übernehmen den Wählhebel eines Automatikautos: Ein Chromknauf gleitet durch einen dunklen Schlitz und hält unter dem gewählten Buchstaben, während ein kleines Bernstein-Display flackert und den Bereich zeigt. Gebaut aus HTML und CSS mit einem kurzen Skript zum Ziehen, passt es zu Auto-Apps, Smart-Home-Panels und Dashboards mit Hardware-Charakter.

Über die Hauptfarbe wird das Leuchten eisblau oder rot statt bernsteinfarben, die Zweitfarbe tönt die Konsole. Halte die Buchstaben bei einem Zeichen und schreib die vollen Namen ins Display.