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
HTML Code
<nav class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-4 flex flex-col md:flex-row items-center justify-between transition-all duration-300">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md mb-2">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-200 ml-2">Brand Name</span>
</div>
<div class="flex flex-col md:flex-row md:space-x-4 mt-4 md:mt-0">
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Services</a>
<a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Contact</a>
</div>
<div class="mt-4 md:mt-0">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
</div>
</nav>
Composants associés
Composant Composants d’amélioration de la navigation
Un composant de navigation réactif avec prise en charge du mode sombre pour les sites Web de commerce électronique. Il présente une palette de couleurs triadique avec un fond sombre pour réduire la fatigue oculaire.
Navigation multimédia en mode sombre
Un composant de navigation complexe et réactif pour les plates-formes de divertissement/médias, doté d’une interface utilisateur en mode sombre avec une palette de couleurs forêt/vert. Comprend un logo, une barre de recherche, des liens de navigation, un profil d’utilisateur et une cloche de notification.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.