Composants d’amélioration de la navigation
Un composant simple d’amélioration de la navigation en mode sombre pour présenter un portfolio, à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Nature-Inspired_Entertainment_Navigation
Un composant de navigation complexe, inspiré de la nature, pour les plateformes de divertissement et de médias, avec des lignes fluides et des combinaisons de couleurs sucrées. Entièrement réactif avec prise en charge du mode sombre.
Composants d’amélioration de la navigation
Un composant de navigation de style Neumorphism avec prise en charge du mode sombre et conception réactive
Composants d’amélioration de la navigation
Une barre de navigation rétro/vintage avec un design complexe pour les sites Web professionnels, avec une palette de couleurs triadique et une prise en charge réactive du thème sombre.