Componente de encabezado

<header class="bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-md font-mono">
  <div class="container mx-auto px-4 py-4 flex items-center justify-between">
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M3 19l6 3V6m0 0l6-3m-6 3v13M3 19V6l6-3m0 0L3 6m0 0v13m0-13l6-3m0 3v13m0-13l-6 3m0 0L3 6m0 0l6-3" />
      </svg>
      <span class="text-xl font-bold tracking-tight text-amber-700 dark:text-amber-300">TuneFlow</span>
    </a>

    <nav class="hidden md:flex space-x-8 text-lg">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Browse</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">My Music</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Radio</a>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-300">Settings</a>
    </nav>

    <div class="flex items-center space-x-4">
      <div class="relative hidden md:block">
        <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-stone-200 dark:bg-stone-800 text-stone-700 dark:text-stone-300 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-all duration-300 w-48 lg:w-64">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <button class="md:hidden focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 rounded-md p-1">
        <svg class="h-7 w-7 text-stone-700 dark:text-stone-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-amber-600 dark:border-amber-400 cursor-pointer object-cover hidden md:block">
    </div>
  </div>
</header>