Composant de navigation
Un composant de navigation simple conçu pour un blog avec des micro-interactions et une palette de couleurs pastel. Il dispose d’une mise en page réactive et d’un support de thème sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
<span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
</li>
</ul>
</div>
</nav>Composants associés
Navigation Monospace pour le secteur de la santé
Il s’agit d’un composant de navigation complexe et réactif pour les applications médicales/de santé, doté d’un design inspiré du monospace/développeur avec des neutres chauds, la prise en charge du mode sombre et des éléments interactifs.
Composant de navigation réactive
Composant de navigation réactif avec micro-interactions, palette de couleurs en niveaux de gris et complexité simple.
Composant de navigation
Un composant de navigation réactif conçu pour l’interface utilisateur en mode sombre, avec des liens, des listes déroulantes et un logo, le tout stylisé avec Tailwind CSS.