3D_Triadic_Simple_Business_Navigation

<nav class="bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 shadow-xl dark:from-gray-800 dark:via-zinc-900 dark:to-black transition-all duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex-shrink-0">
      <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative group">
        <span class="block transform -translate-x-0.5 -translate-y-0.5 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 ease-out z-10 relative">3D Company</span>
        <span class="absolute inset-0 bg-yellow-300 dark:bg-sky-400 opacity-60 rounded-lg blur-sm group-hover:blur-md transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Home
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Services
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        About
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Contact
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-white hover:text-yellow-200 dark:hover:text-sky-300 focus:outline-none focus:text-yellow-200 dark:focus:text-sky-300" aria-label="Toggle navigation">
        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <div id="mobile-menu" class="hidden md:hidden bg-indigo-600 dark:bg-gray-950">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Services</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Contact</a>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for mobile menu toggle (not part of Tailwind CSS component but for functional demo)
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        // Optional: Change icon on toggle
        const icon = button.querySelector('svg');
        if (menu.classList.contains('hidden')) {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        } else {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
        }
      });
    }
  });
</script>