Componente de navegación pegajosa

<nav class="sticky top-0 bg-white dark:bg-gray-800 p-4 shadow-md z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-blue-500 dark:text-blue-300 text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="flex space-x-6">
      <a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Feed</a>
      <a href="#" class="text-violet-500 dark:text-violet-300 hover:text-violet-700 dark:hover:text-violet-500 transition duration-300">Profile</a>
      <a href="#" class="text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-500 transition duration-300">Messages</a>
      <a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Notifications</a>
    </div>

    <!-- Search Bar (Optional) -->
    <div class="hidden md:block">
      <input type="text" placeholder="Search..." class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <!-- User Avatar (Optional) -->
    <div class="flex items-center space-x-2">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-300">
      <span class="text-gray-700 dark:text-gray-300 hidden sm:block">John Doe</span>
    </div>
  </div>
</nav>