Componenti Componenti di miglioramento della navigazione Componente di miglioramento della navigazione

Componente di miglioramento della navigazione

Un componente di miglioramento della navigazione progettato in stile brutalista. Dotato di effetti reattivi, supporto per temi scuri e immagini segnaposto.

Anteprima

Codice HTML

<nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

Componenti correlati

Industrial_Monochromatic_Navigation

Un componente di navigazione complesso e focalizzato sulla modalità oscura per aziende industriali e manifatturiere, caratterizzato da un design monocromatico e da molteplici elementi interattivi adatti per dashboard e interfacce operative.

Aperto

Navigazione governativa ispirata alla carta/stampa

Un componente di navigazione complesso, ispirato alla carta/alla stampa, per siti Web governativi/pubblici, con toni seppia/marrone, reattività e supporto per la modalità scura. Include la navigazione principale, la ricerca e una sezione "collegamenti rapidi" o "servizi".

Aperto

Componenti di miglioramento della navigazione

Un componente di miglioramento della navigazione reattiva per un blog in modalità scura con colori vivaci e funzioni di complessità moderata.

Aperto