App Navbar

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded bg-white w-full px-10 py-6">
    <div class="flex items-center container mx-auto">
      <h1 class="text-lg font-semibold items-center mr-5 cursor-pointer hover:text-blue-600 group transition-colors"><span class="h-8 w-8 rounded-full bg-gray-800 text-white inline-block text-center align-middle group-hover:bg-blue-600 transition-colors">L</span> <span>Logo</span></h1><input type="text" placeholder="Search" class="rounded-full px-3 py-2 bg-gray-100 mr-5">
      <nav class="flex"><a href="#" class="hover:text-blue-600 mr-5 transition-colors">Categories</a> <a href="#" class="hover:text-blue-600 mr-5 transition-colors">Blog</a> <a href="#" class="hover:text-blue-600 mr-5 transition-colors">About</a></nav>
      <div class="flex-1 flex justify-end items-center"><a href="#" class="hover:text-blue-600 mr-5 transition-colors">Username</a>
        <div class="relative cursor-pointer hover:text-blue-600 transition-colors">
          <div class="absolute h-3 w-3 bg-blue-600 rounded-full right-0 border-2 border-white"></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
            <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>