Robot
ka0sdev

<body class="bg-gray-900 font-sans leading-normal tracking-normal">
  <header class="bg-gray-800 shadow-lg">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex justify-between items-center py-4">
        <div class="flex items-center space-x-4">
          <a href="#" class="flex items-center text-gray-300 hover:text-white">
            <i class="iconoir-home text-2xl"></i>
            <span class="font-bold text-xl ml-2">DevPortfolio</span>
          </a>
        </div>
        <nav class="hidden md:flex items-center space-x-6">
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">
            <i class="iconoir-home text-xl"></i>
            <span class="ml-1">Home</span>
          </a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">
            <i class="iconoir-user text-xl"></i>
            <span class="ml-1">About</span>
          </a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">
            <i class="iconoir-briefcase text-xl"></i>
            <span class="ml-1">Projects</span>
          </a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">
            <i class="iconoir-book text-xl"></i>
            <span class="ml-1">Blog</span>
          </a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">
            <i class="iconoir-mail text-xl"></i>
            <span class="ml-1">Contact</span>
          </a>
        </nav>
        <div class="md:hidden flex items-center">
          <button class="mobile-menu-button">
            <i class="iconoir-menu text-2xl text-gray-300"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="mobile-menu hidden md:hidden bg-gray-800">
      <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300">
        <i class="iconoir-home text-xl"></i>
        <span class="ml-1">Home</span>
      </a>
      <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300">
        <i class="iconoir-user text-xl"></i>
        <span class="ml-1">About</span>
      </a>
      <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300">
        <i class="iconoir-briefcase text-xl"></i>
        <span class="ml-1">Projects</span>
      </a>
      <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300">
        <i class="iconoir-book text-xl"></i>
        <span class="ml-1">Blog</span>
      </a>
      <a href="#" class="block py-2 px-4 text-sm text-gray-300 hover:bg-gray-700 hover:text-white transition duration-300">
        <i class="iconoir-mail text-xl"></i>
        <span class="ml-1">Contact</span>
      </a>
    </div>
  </header>
  <script>
    document.querySelector('.mobile-menu-button').addEventListener('click', function() {
      document.querySelector('.mobile-menu').classList.toggle('hidden');
    });
  </script>
</body>