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.
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
Componente Componenti di miglioramento della navigazione
Un componente di navigazione reattivo con supporto della modalità oscura per i siti Web di e-commerce. Presenta una combinazione di colori triadica con uno sfondo scuro per ridurre l'affaticamento degli occhi.
Agricoltura News Card Navigation
Un semplice componente di navigazione ispirato alla carta/alla stampa con una scheda di notizie per siti Web di agricoltura e allevamento, utilizzando una combinazione di colori analoga. È completamente reattivo con il supporto della modalità oscura.
Componenti di miglioramento della navigazione
Un componente di navigazione progettato con scheumorfismo, con elementi digitali che imitano le controparti del mondo reale. È disegnato utilizzando Tailwind CSS con effetti reattivi e supporto per temi scuri.