6 Tailwind Responsive Navbars

<header class="w-full max-w-sm rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
  <div class="flex items-center justify-between px-4 py-3">
    <a href="#home" class="text-lg font-black text-slate-900">Brightly</a>
    <nav aria-label="Main" class="hidden gap-6 text-sm font-semibold text-slate-700 md:flex"><a href="#product">Product</a><a href="#pricing">Pricing</a><a href="#blog">Blog</a></nav>
    <button id="twrn1b" type="button" aria-expanded="false" aria-controls="twrn1m" class="group grid size-10 place-items-center rounded-lg text-slate-800 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 md:hidden"><span class="sr-only">Menu</span>
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="size-6 group-aria-expanded:hidden"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="hidden size-6 group-aria-expanded:block"><path d="M6 6l12 12M18 6L6 18"/></svg>
    </button>
  </div>
  <nav id="twrn1m" aria-label="Main" hidden class="border-t border-slate-200 p-2 md:hidden"><a href="#product" class="block rounded-lg px-3 py-2 font-medium text-slate-800 hover:bg-slate-100">Product</a><a href="#pricing" class="block rounded-lg px-3 py-2 font-medium text-slate-800 hover:bg-slate-100">Pricing</a><a href="#blog" class="block rounded-lg px-3 py-2 font-medium text-slate-800 hover:bg-slate-100">Blog</a></nav>
</header>

var b = document.getElementById('twrn1b'), m = document.getElementById('twrn1m');
b.onclick = function () { var open = b.getAttribute('aria-expanded') !== 'true'; b.setAttribute('aria-expanded', open); m.hidden = !open; };

<header class="w-full max-w-sm rounded-xl bg-slate-900 px-4 pt-3 text-white">
  <div class="flex items-center justify-between"><a href="#home" class="text-lg font-black">Dispatch</a><a href="#subscribe" class="rounded-full bg-white px-3 py-1 text-xs font-bold text-slate-900 hover:bg-slate-200">Subscribe</a></div>
  <nav aria-label="Sections" class="-mx-4 mt-2 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
    <ul class="flex gap-5 whitespace-nowrap text-sm font-medium">
      <li><a href="#world" aria-current="page" class="block border-b-2 border-amber-400 pb-2.5 text-white">World</a></li><li><a href="#business" class="block border-b-2 border-transparent pb-2.5 text-slate-300 hover:text-white">Business</a></li><li><a href="#tech" class="block border-b-2 border-transparent pb-2.5 text-slate-300 hover:text-white">Technology</a></li><li><a href="#science" class="block border-b-2 border-transparent pb-2.5 text-slate-300 hover:text-white">Science</a></li><li><a href="#culture" class="block border-b-2 border-transparent pb-2.5 text-slate-300 hover:text-white">Culture</a></li><li><a href="#travel" class="block border-b-2 border-transparent pb-2.5 text-slate-300 hover:text-white">Travel</a></li>
    </ul>
  </nav>
</header>

<nav aria-label="Main" class="flex w-full max-w-sm items-center gap-1 rounded-xl bg-white p-2 text-sm font-semibold shadow-sm ring-1 ring-slate-200">
  <a href="#home" class="mr-auto px-2 text-base font-black text-slate-900">Kite</a>
  <a href="#docs" class="rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Docs</a>
  <a href="#pricing" class="rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Pricing</a>
  <details class="group relative">
    <summary class="flex cursor-pointer list-none items-center gap-1 rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 [&::-webkit-details-marker]:hidden">More<span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
    <div class="absolute right-0 z-10 mt-2 w-40 rounded-xl bg-white p-1 shadow-lg ring-1 ring-slate-200"><a href="#blog" class="block rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Blog</a><a href="#careers" class="block rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Careers</a><a href="#contact" class="block rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Contact</a></div>
  </details>
</nav>

<header class="flex w-full max-w-sm items-center justify-between rounded-xl bg-white px-4 py-3 shadow-sm ring-1 ring-slate-200"><a href="#home" class="text-lg font-black text-slate-900">Atlas</a><button id="twrn4o" type="button" class="rounded-lg bg-slate-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900">Menu</button></header>
<dialog id="twrn4" aria-label="Menu" class="m-0 h-full max-h-none w-full max-w-none bg-slate-950/95 p-6 text-white backdrop:bg-transparent open:grid open:place-items-center">
  <button type="button" data-close aria-label="Close menu" class="absolute right-4 top-4 grid size-10 place-items-center rounded-full text-xl hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300">✕</button>
  <nav aria-label="Overlay"><ul class="grid gap-4 text-center text-3xl font-black"><li><a href="#tours" class="hover:text-amber-300">Tours</a></li><li><a href="#stays" class="hover:text-amber-300">Stays</a></li><li><a href="#journal" class="hover:text-amber-300">Journal</a></li></ul></nav>
</dialog>

var d = document.getElementById('twrn4');
document.getElementById('twrn4o').onclick = function () { d.showModal(); };
d.querySelector('[data-close]').onclick = function () { d.close(); };
d.querySelectorAll('nav a').forEach(function (a) { a.onclick = function () { d.close(); }; });

<header id="twrn5" class="group w-full max-w-sm rounded-xl bg-indigo-950 px-4 py-3 text-white">
  <div class="flex items-center gap-2"><a href="#home" class="mr-auto text-lg font-black">Pulse</a><a href="#trial" class="rounded-lg bg-white px-3 py-1.5 text-sm font-bold text-indigo-950 hover:bg-indigo-100">Free trial</a><button id="twrn5b" type="button" aria-expanded="false" aria-controls="twrn5m" class="grid size-9 place-items-center rounded-lg hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-300"><span class="sr-only">Menu</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="size-5 transition-transform group-data-[open]:rotate-90 motion-reduce:transition-none"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button></div>
  <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 group-data-[open]:grid-rows-[1fr] motion-reduce:transition-none"><nav id="twrn5m" aria-label="Main" class="overflow-hidden"><ul class="grid gap-1 pt-3 text-sm"><li><a href="#features" class="block rounded-lg px-3 py-2 text-indigo-100 hover:bg-white/10">Features</a></li><li><a href="#pricing" class="block rounded-lg px-3 py-2 text-indigo-100 hover:bg-white/10">Pricing</a></li><li><a href="#login" class="block rounded-lg px-3 py-2 text-indigo-100 hover:bg-white/10">Log in</a></li></ul></nav></div>
</header>

var h = document.getElementById('twrn5'), b = document.getElementById('twrn5b'), m = document.getElementById('twrn5m');
function set(open) { b.setAttribute('aria-expanded', open); m.inert = !open; if (open) h.dataset.open = ''; else delete h.dataset.open; }
b.onclick = function () { set(b.getAttribute('aria-expanded') !== 'true'); };
set(false);

<header class="relative flex w-full max-w-sm items-center justify-between rounded-xl bg-white px-4 py-3 shadow-sm ring-1 ring-slate-200">
  <a href="#home" class="text-lg font-black text-slate-900">Fern</a>
  <details class="group">
    <summary class="flex cursor-pointer list-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-semibold text-slate-800 hover:bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-700 [&::-webkit-details-marker]:hidden">Menu<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="size-4 transition-transform group-open:rotate-45 motion-reduce:transition-none"><path d="M12 5v14M5 12h14"/></svg></summary>
    <nav aria-label="Main" class="absolute inset-x-0 top-full z-10 mt-2 rounded-xl bg-white p-2 shadow-lg ring-1 ring-slate-200"><a href="#plants" class="block rounded-lg px-3 py-2 text-slate-800 hover:bg-emerald-50">Plants</a><a href="#pots" class="block rounded-lg px-3 py-2 text-slate-800 hover:bg-emerald-50">Pots</a><a href="#care" class="block rounded-lg px-3 py-2 text-slate-800 hover:bg-emerald-50">Care guides</a></nav>
  </details>
</header>