Componenti di miglioramento della navigazione
Un semplice componente di miglioramento della navigazione in modalità scura per mostrare un portfolio, utilizzando Tailwind CSS.
Codice HTML
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<h1 class="text-white text-xl font-bold">My Portfolio</h1>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
</nav>
<section class="bg-gray-900 dark:bg-gray-800 p-8">
<div class="max-w-6xl mx-auto text-center">
<h2 class="text-white text-2xl font-bold">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 1</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
</div>
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 2</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
</div>
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 3</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
<div class="max-w-6xl mx-auto text-center">
<p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
</div>
</footer>Componenti correlati
Navigazione ispirata alla carta/stampa per piattaforme di intrattenimento
Un componente di navigazione semplice e reattivo per piattaforme di intrattenimento, che imita uno stile di carta/stampa con una tavolozza di colori verde foresta. Include il supporto per la modalità oscura e utilizza l'HTML semantico.
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.
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.