Componenti Componenti di miglioramento della navigazione Componenti di miglioramento della navigazione

Componenti di miglioramento della navigazione

Un componente di navigazione progettato con un'estetica brutalista, con design audaci, contrasto elevato e layout insoliti. Include effetti reattivi e supporta temi scuri con CSS.

Anteprima

Codice HTML

<nav class="bg-white dark:bg-gray-800 p-6">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
      <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
    </div>
    <ul class="flex space-x-6">
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#home">Home</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#about">About</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#services">Services</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
  <div class="bg-gray-300 dark:bg-gray-700 my-6">
    <img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
  </div>
  <div class="container mx-auto py-6">
    <h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg"> 
        <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
      </div>
    </div>
  </div>
  <footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
    <p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
  </footer>
</nav>

Componenti correlati

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.

Aperto

Componenti di miglioramento della navigazione

Un semplice componente di miglioramento della navigazione in modalità scura per mostrare un portfolio, utilizzando Tailwind CSS.

Aperto

Componente di miglioramento della navigazione

Un componente di navigazione reattivo progettato per la modalità oscura con Tailwind CSS, con segnaposto per loghi, immagini e avatar.

Aperto