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
Composant de navigation
Un composant de navigation réactif conçu pour la consommation de blog/contenu avec un style de conception 3D, une palette de couleurs complémentaire et une complexité modérée intégrant certaines fonctionnalités interactives.
Composant de navigation Glassmorphism
Un composant de navigation de style glassmorphism pour les sites de commerce électronique, avec des couleurs monochromes, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de navigation Material Design
Un composant de navigation Material Design simple et réactif pour les interfaces de médias sociaux à l’aide d’un schéma de couleurs en niveaux de gris. Dispose d’une mise en page épurée avec logo, liens de navigation, barre de recherche et avatar de l’utilisateur. Inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind.