Onglets en hublots d'avion
Chaque section est un hublot au volet baissé ; quand on la choisit, le volet remonte et dévoile son ciel.
Réglages
Code
<div class="uvq12-cw"><div class="wl" role="tablist" aria-label="Sections"><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">Vols</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">Hôtels</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">Voitures</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">Offres</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">Plus de 120 destinations au départ de Madrid.</div><div class="pn" role="tabpanel" id="uvq12-cw-p1" aria-labelledby="uvq12-cw-t1" hidden>Chambres avec petit-déjeuner inclus.</div><div class="pn" role="tabpanel" id="uvq12-cw-p2" aria-labelledby="uvq12-cw-t2" hidden>Retrait dans le même terminal.</div><div class="pn" role="tabpanel" id="uvq12-cw-p3" aria-labelledby="uvq12-cw-t3" hidden>Jusqu'à 30 % de moins ce mois-ci.</div></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Des onglets dans la paroi crème d'une cabine : chaque section est un hublot ovale au volet de plastique baissé. Quand on en choisit un, le volet remonte avec un léger ressort et dévoile un ciel différent, du bleu dégagé au coucher de soleil, à la nuit ou à la mer, avec des nuages. Une liseuse accompagne le texte dessous. Pour les compagnies aériennes et agences de voyage.
La couleur principale marque l'étiquette active et la secondaire teinte la paroi de la cabine. Garde trois à cinq hublots aux noms courts, et remplace les dégradés du CSS par tes propres vues.