Create a two-tier site header with Tailwind CSS. The top tier is a neutral-900 announcement bar with centred small text carrying a bold label pill, a sentence about a release, an inline underlined link with an arrow, and a dismiss cross positioned at the right edge. The second tier is the main nav on white with a hairline bottom border: a wordmark, a centre group of five links where one carries a small green "New" badge, and a right group with a search glyph button, a "Sign in" text link and a dark rounded button. Make the whole header sticky as one unit so both tiers scroll together. Then add JavaScript that removes the announcement bar when the cross is clicked, remembers the dismissal in localStorage under a versioned key so a new announcement can reappear, and restores the hidden state on load before paint.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a two-tier site header with Tailwind CSS. The top tier is a neutral-900 announcement bar with centred small text carrying a bold label pill, a sentence about a release, an inline underlined link with an arrow, and a dismiss cross positioned at the right edge. The second tier is the main nav on white with a hairline bottom border: a wordmark, a centre group of five links where one carries a small green "New" badge, and a right group with a search glyph button, a "Sign in" text link and a dark rounded button. Make the whole header sticky as one unit so both tiers scroll together. Then add JavaScript that removes the announcement bar when the cross is clicked, remembers the dismissal in localStorage under a versioned key so a new announcement can reappear, and restores the hidden state on load before paint.
// Bump the key when the message changes so a dismissal does not silence the next one.
var KEY = "announce:v4.2";
var bar = document.getElementById("announceBar");
var close = document.getElementById("announceClose");
try {
if (localStorage.getItem(KEY) === "dismissed") bar.remove();
} catch (e) {
// Private mode or blocked storage — showing the bar is the safe fallback.
}
close.addEventListener("click", function () {
bar.remove();
try {
localStorage.setItem(KEY, "dismissed");
} catch (e) {}
});
