Navbar

            
<!-- navbar -->
<nav class="bg-primary-100 dark:bg-primary-900 flex justify-between items-center duration-500 ease-in-out rounded-lg shadow-outset-fixed mb-3">
  <!-- logo -->
  <div class="text-2xl font-black flex flex-row items-center gap-1 px-4 pt-4 mb-6">
    <div class="w-8 h-8 rounded bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-fixed flex items-center justify-center">N</div><span class="max-md:hidden inline">eudash</span>
  </div>
  
  <!-- right item -->
  <div class="flex items-center gap-3 me-3">
    <a href="#" class="relative inline-flex items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset rounded-full text-primary-700 dark:text-primary-200 w-10 h-10 me-2">
      <!-- badge -->
      <div class="absolute -top-0.5 -end-2 min-w-[20px] px-1 h-5 flex items-center justify-center rounded-full pointer-events-none text-[10px] leading-none tracking-[.045em] font-medium border border-primary-200 dark:border-primary-950 bg-red-200 dark:bg-red-900 shadow-outset-fixed">12</div>
      <i class="bi bi-bell"></i>
    </a>

    <a href="#" class="relative inline-flex items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset rounded-full text-primary-700 dark:text-primary-200 w-10 h-10 me-2">
      <!-- badge -->
      <div class="absolute -top-0.5 -end-2 min-w-[20px] px-1 h-5 flex items-center justify-center rounded-full pointer-events-none text-[10px] leading-none tracking-[.045em] font-medium border border-primary-200 dark:border-primary-950 bg-red-200 dark:bg-red-900 shadow-outset-fixed">3</div>
      <i class="bi bi-envelope"></i>
    </a>

    <a href="#" class="relative inline-flex items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset rounded-full text-primary-700 dark:text-primary-200 w-10 h-10 me-2">
      <i class="bi bi-person"></i>
    </a>
  </div>
</nav>