Componenti Barra di navigazione Barra di navigazione dei social media retrò/vintage

Barra di navigazione dei social media retrò/vintage

Barra di navigazione retrò / vintage per i social media con combinazione di colori analoga, complessità semplice, reattivo e supporto per temi scuri.

Anteprima

Codice HTML

<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>

Componenti correlati

Neon_Glow_Navbar_Music_Audio

Un componente della barra di navigazione complesso e reattivo per piattaforme musicali/audio, con effetti neon/bagliore e una combinazione di colori neutri caldi. Include il supporto per la modalità oscura ed elementi interattivi.

Aperto

Barra di navigazione

Componente della barra di navigazione reattiva in modalità oscura utilizzando Tailwind CSS

Aperto

Barra di navigazione Art Déco

Una barra di navigazione reattiva ispirata all'Art Déco per CRM/Business Tools, con motivi geometrici, ricchi toni gioiello e supporto per la modalità scura. Progettato con complessità moderata, inclusi elementi interattivi.

Aperto