Build a mobile navigation with Tailwind CSS. The bar itself is a sticky top row with a wordmark on the left, a horizontal link list hidden below md, a "Sign in" link and a dark "Get started" button on the right also hidden below md, and a hamburger button of three stacked lines shown only on small screens. The drawer is a fixed inset-0 layer containing a black backdrop with a blur and a right-hand panel of eighty percent width, max-w-xs, full height, white, holding a header with the wordmark and a close cross, a stack of large tappable links with hairline dividers, a small section labelled Resources with three muted links, and a footer with the two buttons stacked full width. Then add JavaScript that opens and closes the drawer with a translate-x transition and a fading backdrop, locks body scroll while open, closes on backdrop click, on Escape and on any link click, and moves focus to the close button on open.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a mobile navigation with Tailwind CSS. The bar itself is a sticky top row with a wordmark on the left, a horizontal link list hidden below md, a "Sign in" link and a dark "Get started" button on the right also hidden below md, and a hamburger button of three stacked lines shown only on small screens. The drawer is a fixed inset-0 layer containing a black backdrop with a blur and a right-hand panel of eighty percent width, max-w-xs, full height, white, holding a header with the wordmark and a close cross, a stack of large tappable links with hairline dividers, a small section labelled Resources with three muted links, and a footer with the two buttons stacked full width. Then add JavaScript that opens and closes the drawer with a translate-x transition and a fading backdrop, locks body scroll while open, closes on backdrop click, on Escape and on any link click, and moves focus to the close button on open.
var drawer = document.getElementById("drawer");
var panel = document.getElementById("drawerPanel");
var backdrop = document.getElementById("drawerBackdrop");
var openBtn = document.getElementById("drawerOpen");
var closeBtn = document.getElementById("drawerClose");
var links = Array.prototype.slice.call(document.querySelectorAll(".drawer-link"));
function open() {
drawer.classList.remove("pointer-events-none");
backdrop.classList.remove("opacity-0");
panel.classList.remove("translate-x-full");
document.body.style.overflow = "hidden";
closeBtn.focus();
}
function close() {
backdrop.classList.add("opacity-0");
panel.classList.add("translate-x-full");
document.body.style.overflow = "";
// Wait for the slide-out before taking the layer out of the hit test.
setTimeout(function () {
drawer.classList.add("pointer-events-none");
}, 300);
openBtn.focus();
}
openBtn.addEventListener("click", open);
closeBtn.addEventListener("click", close);
backdrop.addEventListener("click", close);
links.forEach(function (link) {
link.addEventListener("click", close);
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !drawer.classList.contains("pointer-events-none")) close();
});
