Aircraft window tabs
Each section is a cabin window with its shade down; choose it and the shade slides up to show that section's sky.
Settings
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">Flights</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">Cars</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">Deals</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">Over 120 destinations from Madrid.</div><div class="pn" role="tabpanel" id="uvq12-cw-p1" aria-labelledby="uvq12-cw-t1" hidden>Rooms with breakfast included.</div><div class="pn" role="tabpanel" id="uvq12-cw-p2" aria-labelledby="uvq12-cw-t2" hidden>Pick-up at the same terminal.</div><div class="pn" role="tabpanel" id="uvq12-cw-p3" aria-labelledby="uvq12-cw-t3" hidden>Up to 30% off this month.</div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
Tabs set into the cream wall of an aircraft cabin: each section is an oval window with a plastic shade pulled down. Choosing one raises its shade with a soft spring and reveals a different sky, from clear blue to sunset, night and sea, while clouds drift past. A reading light sits next to the text below. It suits airlines, travel agencies and booking flows.
The main color marks the active label and the secondary color tints the cabin wall. Keep three to five windows with short names, and swap the gradients in the CSS to show your own views.