Neumorphic Navigation コンポーネント

<nav class="p-4 bg-purple-200 dark:bg-purple-900 shadow-lg dark:shadow-purple-950 rounded-xl m-4 transition-all duration-300 ease-in-out">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="mb-4 md:mb-0">
      <a href="#" class="text-purple-800 dark:text-purple-200 text-3xl font-bold tracking-tight transform transition-transform duration-300 hover:scale-105">
        <span class="block relative leading-none">
          <span class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 dark:from-purple-700 dark:to-purple-900 rounded-lg blur-sm opacity-70"></span>
          <span class="relative z-10 p-2 rounded-lg shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark text-white dark:text-purple-100">Forum Hub</span>
        </span>
      </a>
    </div>
    <div class="flex flex-wrap justify-center space-x-2 md:space-x-4">
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h2v3H5V6zm4 0h2v3H9V6zm4 0h2v3h-2V6zM5 11h2v3H5v-3zm4 0h2v3H9v-3zm4 0h2v3h-2v-3z"></path></svg>
        Categories
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
        Messages
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
        Profile
      </a>
    </div>
  </div>
</nav>

<style>
  /* Neumorphic Shadows for Light Mode */
  .shadow-neumorphic {
    box-shadow: 6px 6px 12px #bca8e8, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-pressed {
    box-shadow: inset 4px 4px 8px #bca8e8, inset -4px -4px 8px #ffffff;
  }
  .shadow-inner-neumorphic {
    box-shadow: inset 3px 3px 6px #8e7eb8, inset -3px -3px 6px #d8c2ff;
  }

  /* Neumorphic Shadows for Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a1980, -6px -6px 12px #8e2cb7;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 4px 4px 8px #4a1980, inset -4px -4px 8px #8e2cb7;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #3a1566, inset -3px -3px 6px #5e1f9a;
  }
</style>