Navbars

<!-- Frosted Glass Navbar -->
<nav class="flex items-center justify-between
  bg-white/[0.04] backdrop-blur-xl border border-white/[0.08]
  rounded-xl px-5 py-3">

  <!-- Logo -->
  <div class="flex items-center gap-1.5 font-black text-white text-base">
    <div class="w-2 h-2 rounded-full bg-yellow-400 shadow-[0_0_8px_#e8ff47]"></div>
    Acme
  </div>

  <!-- Links -->
  <div class="flex gap-1">
    <a href="#" class="text-sm px-3 py-1.5 rounded-lg hover:bg-white/[0.07] transition-colors text-white/55">Home</a>
    <a href="#" class="text-sm px-3 py-1.5 rounded-lg hover:bg-white/[0.07] transition-colors text-white/55">Products</a>
    <a href="#" class="text-sm px-3 py-1.5 rounded-lg hover:bg-white/[0.07] transition-colors text-white/55">Pricing</a>
  </div>

  <!-- CTA -->
  <div class="flex items-center gap-2.5">
    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-yellow-400 to-emerald-400"></div>
    <button class="bg-yellow-400 text-black font-bold text-xs px-4 py-1.5 rounded-lg">Get Started</button>
  </div>

</nav>

<div class="flex justify-center">
  <nav class="flex items-center gap-1 bg-zinc-900 border border-white/10 rounded-full px-4 py-1.5 shadow-[0_8px_32px_rgba(0,0,0,0.6)]">
    <span class="font-black text-white text-sm mr-2">⬡</span>
    <a href="#" class="text-xs px-3.5 py-1.5 rounded-full text-white/50 hover:text-white hover:bg-white/[0.07] transition-all">Home</a>
    <a href="#" class="text-xs px-3.5 py-1.5 rounded-full bg-yellow-400 text-black font-semibold">Explore</a>
    <a href="#" class="text-xs px-3.5 py-1.5 rounded-full text-white/50 hover:text-white hover:bg-white/[0.07] transition-all">Pricing</a>
    <button class="ml-2 text-xs font-bold bg-white/90 text-black px-4 py-1.5 rounded-full">Sign up</button>
  </nav>
</div>

<!-- Gradient border needs custom CSS keyframe -->
<div class="p-[1.5px] rounded-xl nav-grad-wrap">
  <nav class="bg-[#0d0d1a] rounded-[10px] flex items-center justify-between px-5 py-2.5">
    <span class="font-black text-white text-sm">⬡ Gradient</span>
    <div class="flex gap-1">
      <a href="#" class="text-xs text-white/50 hover:text-white px-3 py-1.5 rounded-md transition-colors">Features</a>
      <a href="#" class="text-xs text-white/50 hover:text-white px-3 py-1.5 rounded-md transition-colors">Pricing</a>
    </div>
    <button class="text-xs font-bold px-4 py-1.5 rounded-lg bg-gradient-to-r from-yellow-400 to-emerald-400 text-black">Start free →</button>
  </nav>
</div>

/* Required CSS */
.nav-grad-wrap {
  background: linear-gradient(90deg, #e8ff47, #47ffb2, #ff6b47, #e8ff47);
  background-size: 300% 100%;
  animation: grad-shift 4s linear infinite;
}
@keyframes grad-shift {
  0% { background-position: 0%; }
  100% { background-position: 300%; }
}

<nav class="flex items-stretch border-b-[3px] border-black bg-[#f0ede6]">
  <div class="px-6 py-3.5 border-r-[3px] border-black bg-yellow-400 font-black text-lg tracking-tight">BRUT</div>
  <div class="flex">
    <a href="#" class="px-5 flex items-center text-[11px] font-bold uppercase tracking-widest border-r border-black/10 bg-black text-yellow-400">Work</a>
    <a href="#" class="px-5 flex items-center text-[11px] font-bold uppercase tracking-widest border-r border-black/10 hover:bg-black hover:text-[#f0ede6] transition-colors">About</a>
    <a href="#" class="px-5 flex items-center text-[11px] font-bold uppercase tracking-widest border-r border-black/10 hover:bg-black hover:text-[#f0ede6] transition-colors">Blog</a>
  </div>
  <div class="ml-auto flex items-center px-5">
    <button class="bg-black text-yellow-400 font-black text-[11px] uppercase tracking-wider px-5 py-2">Contact</button>
  </div>
</nav>