レトロ/ビンテージソーシャルメディアナビゲーションバー

<nav class="bg-gradient-to-r from-purple-700 via-pink-500 to-red-500 p-4 shadow-lg dark:from-purple-900 dark:via-pink-700 dark:to-red-700">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold font-retro">SocialFlow</div>
    <div class="space-x-4">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Feed</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Friends</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Messages</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Profile</a>
    </div>
    <div class="flex items-center space-x-4">
      <button class="text-white focus:outline-none dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
        <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z"></path></svg>
      </button>
    </div>
  </div>
</nav>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  .font-retro {
    font-family: 'Press Start 2P', cursive;
  }
</style>