Componenti Componenti di navigazione Navigazione Skeuomorphic

Navigazione Skeuomorphic

Un componente di navigazione semplice e reattivo con design Skeuomorphic, combinazione di colori analoga adatta per applicazioni di social media, con supporto per temi scuri.

Anteprima

Codice HTML

<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Home
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Profile
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Messages
        </div>
      </a>
    </div>
  </div>
</nav>

Componenti correlati

Navigazione retrò sui social media

Componente di navigazione reattiva con modalità oscura per i social media (retrò/vintage, toni della terra, complessità moderata)

Aperto

Componente Componenti di navigazione

Un componente di navigazione con un tema scuro, un design reattivo e senza JavaScript.

Aperto

Componente Componenti di navigazione

Glassmorphism Monocromatico Moderato Componente di Navigazione E-commerce con Supporto Modalità Oscura

Aperto