Create a navbar... - Tailwind AI

Anuj Kumar
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
  <nav class="bg-white shadow-lg">
      <div class="max-w-6xl mx-auto px-4">
          <div class="flex justify-between items-center">
              <div class="flex items-center space-x-4">
                  <div>
                      <a href="#" class="flex items-center py-5 px-2 text-gray-700 hover:text-gray-900">
                          <i class="iconoir-food text-2xl"></i>
                          <span class="font-bold text-xl ml-2">Foodie</span>
                      </a>
                  </div>
                  <div class="hidden md:flex items-center space-x-1">
                      <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">
                          <i class="iconoir-home text-xl"></i>
                          <span class="ml-1">Home</span>
                      </a>
                      <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">
                          <i class="iconoir-restaurant text-xl"></i>
                          <span class="ml-1">Menu</span>
                      </a>
                      <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">
                          <i class="iconoir-cart text-xl"></i>
                          <span class="ml-1">Orders</span>
                      </a>
                      <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">
                          <i class="iconoir-user text-xl"></i>
                          <span class="ml-1">Profile</span>
                      </a>
                  </div>
              </div>
              <div class="hidden md:flex items-center space-x-1">
                  <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">
                      <i class="iconoir-login text-xl"></i>
                      <span class="ml-1">Login</span>
                  </a>
                  <a href="#" class="py-2 px-3 bg-yellow-400 text-yellow-900 rounded hover:bg-yellow-300 transition duration-300">
                      <i class="iconoir-user-plus text-xl"></i>
                      <span class="ml-1">Sign Up</span>
                  </a>
              </div>
              <div class="md:hidden flex items-center">
                  <button class="mobile-menu-button">
                      <i class="iconoir-menu text-2xl"></i>
                  </button>
              </div>
          </div>
      </div>
      <div class="mobile-menu hidden md:hidden">
          <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">
              <i class="iconoir-home text-xl"></i>
              <span class="ml-1">Home</span>
          </a>
          <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">
              <i class="iconoir-restaurant text-xl"></i>
              <span class="ml-1">Menu</span>
          </a>
          <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">
              <i class="iconoir-cart text-xl"></i>
              <span class="ml-1">Orders</span>
          </a>
          <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">
              <i class="iconoir-user text-xl"></i>
              <span class="ml-1">Profile</span>
          </a>
          <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">
              <i class="iconoir-login text-xl"></i>
              <span class="ml-1">Login</span>
          </a>
          <a href="#" class="block py-2 px-4 text-sm bg-yellow-400 text-yellow-900 rounded hover:bg-yellow-300 transition duration-300">
              <i class="iconoir-user-plus text-xl"></i>
              <span class="ml-1">Sign Up</span>
          </a>
      </div>
  </nav>
</body>
Create a navbar for food delviery system
