Copy Create a multi-product suite navigation bar with Tailwind CSS. Include a product launcher button, current product wordmark, contextual links, search, help, and account controls. The launcher opens a polished grid of six products with icons, descriptions, recent badge, and a footer link for administration. Add JavaScript for opening, outside-click and Escape closing, and filtering products from a search field.<div class="relative"><nav class="border-b border-neutral-200 bg-white"><div class="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4"><button id="productLauncher" class="grid h-9 w-9 grid-cols-3 gap-0.5 rounded-lg border border-neutral-200 p-2" aria-expanded="false" aria-label="Open product launcher"><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span><span class="rounded-sm bg-neutral-400"></span></button><a href="#" class="font-semibold text-neutral-900">Northstar <span class="font-normal text-neutral-400">Projects</span></a><div class="hidden flex-1 gap-5 text-sm text-neutral-500 md:flex"><a href="#">Overview</a><a href="#">Roadmaps</a><a href="#">Reports</a></div><button class="ml-auto rounded-lg border border-neutral-200 px-3 py-2 text-xs text-neutral-500">Search <kbd class="ml-2">⌘K</kbd></button><button class="h-9 w-9 rounded-full bg-neutral-200 text-xs">CS</button></div></nav><div id="productPanel" class="absolute left-4 top-14 z-20 hidden w-[min(92vw,520px)] rounded-2xl border border-neutral-200 bg-white p-4 shadow-2xl"><input id="productSearch" placeholder="Find a product" class="w-full rounded-xl border border-neutral-200 px-3 py-2.5 text-sm outline-none focus:border-neutral-900" /><div id="productGrid" class="mt-3 grid gap-2 sm:grid-cols-2"><a data-product href="#" class="rounded-xl p-3 hover:bg-neutral-50"><b class="text-sm text-neutral-800">Projects</b><p class="text-xs text-neutral-400">Plan and deliver work</p></a><a data-product href="#" class="rounded-xl p-3 hover:bg-neutral-50"><b class="text-sm text-neutral-800">Signals</b><p class="text-xs text-neutral-400">Research repository</p></a><a data-product href="#" class="rounded-xl p-3 hover:bg-neutral-50"><b class="text-sm text-neutral-800">Canvas</b><p class="text-xs text-neutral-400">Visual collaboration</p></a><a data-product href="#" class="rounded-xl p-3 hover:bg-neutral-50"><b class="text-sm text-neutral-800">Automations</b><p class="text-xs text-neutral-400">Workflow orchestration</p></a><a data-product href="#" class="rounded-xl p-3 hover:bg-neutral-50"><b class="text-sm text-neutral-800">Reports</b><p class="text-xs text-neutral-400">Shared analytics</p></a><a data-product href="#" class="rounded-xl p-3 hover:bg-neutral-50"><b class="text-sm text-neutral-800">Developer</b><p class="text-xs text-neutral-400">APIs and webhooks</p></a></div><a href="#" class="mt-3 block border-t border-neutral-100 pt-3 text-xs font-medium text-neutral-600">Manage organization products →</a></div></div>var launcher = document.getElementById("productLauncher"); var panel = document.getElementById("productPanel"); var search = document.getElementById("productSearch"); var products = [].slice.call(document.querySelectorAll("[data-product]")); function closeProducts() { panel.classList.add("hidden"); launcher.setAttribute("aria-expanded", "false"); } launcher.addEventListener("click", function () { var opening = panel.classList.contains("hidden"); panel.classList.toggle("hidden"); launcher.setAttribute("aria-expanded", String(opening)); if (opening) search.focus(); }); search.addEventListener("input", function () { var query = search.value.toLowerCase(); products.forEach(function (product) { product.classList.toggle("hidden", product.textContent.toLowerCase().indexOf(query) === -1); }); }); document.addEventListener("click", function (event) { if (!panel.contains(event.target) && !launcher.contains(event.target)) closeProducts(); }); document.addEventListener("keydown", function (event) { if (event.key === "Escape") closeProducts(); }); 