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

Componente di navigazione Brutalismo

Un componente di navigazione reattivo progettato in stile brutalista, che mostra una combinazione di colori monocromatica, ideale per un sito web portfolio. Le caratteristiche includono un layout audace con contrasto elevato, supporto della modalità oscura utilizzando Tailwind CSS ed elementi interattivi come menu a discesa o collegamenti ai pulsanti.

Aperto

Swiss_International_Navigation_Fashion_Beauty

Un componente di navigazione complesso e reattivo per i marchi di moda/bellezza, che aderisce ai principi di progettazione della tipografia svizzera/internazionale con una combinazione di colori blu aziendale. Include il supporto per la modalità oscura e più elementi interattivi.

Aperto

Navigazione brutalista sui social media

Un componente di navigazione reattivo progettato in uno stile brutalista per le applicazioni dei social media, utilizzando una combinazione di colori complementari ed elementi minimi.

Aperto