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.
Codice HTML
<nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
<div class="text-white font-bold text-2xl">
Portfolio
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
</li>
</ul>
<div class="relative group">
<button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
Menu
</button>
<div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
<a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
<a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
</div>
</div>
</nav>
<section class="bg-gray-800 dark:bg-gray-900 p-10">
<h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 1</h3>
<p class="text-gray-300">Short description of project 1.</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 2</h3>
<p class="text-gray-300">Short description of project 2.</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 3</h3>
<p class="text-gray-300">Short description of project 3.</p>
</div>
</div>
</div>
</section>Componenti correlati
Componente di navigazione
Un componente di navigazione reattivo progettato con microinterazioni e caratterizzato da animazioni coinvolgenti basate sulle azioni dell'utente, che supportano temi chiari e scuri. Il componente include l'avatar del profilo, i collegamenti di navigazione e gli effetti al passaggio del mouse.
Componente Componenti di navigazione
Un componente di navigazione reattivo con colori vivaci e microinterazioni, progettato per un portfolio.
Barra di navigazione retrò per l'e-commerce
Un componente di navigazione in scala di grigi in stile retrò/vintage per l'e-commerce, caratterizzato da una complessità moderata con elementi interattivi come passaggi del mouse e menu a discesa. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.