3D_Vibrant_Simple_Job_Career_Navigation

<nav class="bg-gradient-to-r from-purple-500 to-indigo-600 dark:from-gray-800 dark:to-gray-900 shadow-xl relative z-10">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
    <div class="flex items-center justify-between h-16">
      <div class="flex-shrink-0">
        <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative">
          <span class="relative block px-1 pb-1 transform -skew-x-6 bg-yellow-400 dark:bg-teal-500 rounded-lg shadow-md hover:scale-105 transition duration-300 ease-in-out">
            <span class="block transform skew-x-6 text-indigo-800 dark:text-gray-900">JOB<span class="text-purple-700 dark:text-gray-200">HUB</span></span>
          </span>
          <span class="absolute top-1 left-1 block w-full h-full bg-blue-600 dark:bg-gray-700 rounded-lg filter blur-sm opacity-50 -z-10"></span>
        </a>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-6">
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Find Jobs
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-red-600 dark:bg-red-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Companies
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-green-600 dark:bg-green-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Careers
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-blue-600 dark:bg-blue-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Post Job
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-orange-600 dark:bg-orange-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-yellow-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-800 focus:ring-white dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <svg class="block h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <svg class="hidden h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-slide-down delay-150 duration-500 ease-out">
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Find Jobs
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-red-600 dark:bg-red-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Companies
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-green-600 dark:bg-green-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Careers
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-blue-600 dark:bg-blue-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Post Job
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-orange-600 dark:bg-orange-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
    </div>
  </div>
</nav>