Neumorphe Social-Media-Navigation

<nav class="p-4 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-bold text-gray-700 dark:text-gray-200">NuSocial</div>
    <div class="flex space-x-4 md:space-x-6">
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Home">
        <svg class="w-6 h-6" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0v-9M9 21h6"></path>
        </svg>
      </a>
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Messages">
        <svg class="w-6 h-6" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
        </svg>
      </a>
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Notifications">
        <svg class="w-6 h-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
      </a>
      <button
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="User profile">
        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-6 h-6 rounded-full object-cover">
      </button>
    </div>
  </div>
  
  <!-- Custom Styles for Neumorphic Shadow -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #6e6e6e, -6px -6px 12px #929292;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #6e6e6e, inset -6px -6px 12px #929292;
    }
  </style>
</nav>