A Sticky Header
One last thing: the header with the navigation should stay at the top of the window while the visitor scrolls, so that the links are always at hand.
As you know from the CSS course, an element with position: sticky stays in normal flow until scrolling would carry it past the edge given by its offset. Then it sticks to that edge, but only while its parent is on the screen. The parent of our header is body, which is as tall as the whole page, so the header will never scroll away. In Tailwind, all it takes is the classes sticky top-0. (With fixed, the header would stay in the window too, but it would leave normal flow, and the hero would slide up under it.)
Which of the overlapping elements is on top is decided by z-index, with the classes z-0, z-10, z-20, z-30, z-40 and z-50 (z-10 is z-index: 10). The steps of ten leave room for elements that need to go in between.
Instructions
Add the classes sticky top-0 to the header. Scroll down in the preview: the header stays at the top. But it has no background, so the page shows through it, and the text of the page gets mixed up with the links.
Add the class bg-white/90: a white background with an opacity of 90%, so the page only faintly shows through. Now scroll down to Oscar's card: the card, badge and all, slides over the header. As in the CSS course, an element with a position (the card is relative) that comes later in the HTML is drawn on top.
Add the class z-10 to the header. Now everything slides under it.
Start programming for free
10/11