Tabs als Flugzeugfenster
Jeder Bereich ist ein Kabinenfenster mit heruntergezogener Blende; bei der Wahl gleitet sie hoch und zeigt den Himmel dieses Bereichs.
Einstellungen
Code
<div class="uvq12-cw"><div class="wl" role="tablist" aria-label="Bereiche"><button type="button" role="tab" id="uvq12-cw-t0" aria-selected="true" aria-controls="uvq12-cw-p0" tabindex="0"><span class="wn" aria-hidden="true"><span class="vw v0"></span><span class="sh"></span></span><span class="lb">Flüge</span></button><button type="button" role="tab" id="uvq12-cw-t1" aria-selected="false" aria-controls="uvq12-cw-p1" tabindex="-1"><span class="wn" aria-hidden="true"><span class="vw v1"></span><span class="sh"></span></span><span class="lb">Hotels</span></button><button type="button" role="tab" id="uvq12-cw-t2" aria-selected="false" aria-controls="uvq12-cw-p2" tabindex="-1"><span class="wn" aria-hidden="true"><span class="vw v2"></span><span class="sh"></span></span><span class="lb">Mietwagen</span></button><button type="button" role="tab" id="uvq12-cw-t3" aria-selected="false" aria-controls="uvq12-cw-p3" tabindex="-1"><span class="wn" aria-hidden="true"><span class="vw v3"></span><span class="sh"></span></span><span class="lb">Angebote</span></button></div><div class="bd"><span class="lt" aria-hidden="true"></span><div class="pn" role="tabpanel" id="uvq12-cw-p0" aria-labelledby="uvq12-cw-t0">Mehr als 120 Ziele ab Madrid.</div><div class="pn" role="tabpanel" id="uvq12-cw-p1" aria-labelledby="uvq12-cw-t1" hidden>Zimmer mit Frühstück.</div><div class="pn" role="tabpanel" id="uvq12-cw-p2" aria-labelledby="uvq12-cw-t2" hidden>Abholung direkt am Terminal.</div><div class="pn" role="tabpanel" id="uvq12-cw-p3" aria-labelledby="uvq12-cw-t3" hidden>Bis zu 30 % günstiger in diesem Monat.</div></div></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.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Tabs in der cremefarbenen Wand einer Flugzeugkabine: Jeder Bereich ist ein ovales Fenster mit heruntergezogener Kunststoffblende. Wählst du eines, fährt die Blende mit sanfter Feder hoch und zeigt einen anderen Himmel, von klarem Blau über Sonnenuntergang bis Nacht und Meer, während Wolken vorbeiziehen. Darunter begleitet ein Leselicht den Text. Passend für Airlines, Reisebüros und Buchungsstrecken.
Die Hauptfarbe markiert das aktive Label, die Zweitfarbe tönt die Kabinenwand. Nutze drei bis fünf Fenster mit kurzen Namen und tausche die Verläufe im CSS gegen eigene Ausblicke.