Navigation skeuomorphe
Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.
HTML Code
<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Home
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Profile
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Messages
</div>
</a>
</div>
</div>
</nav>Composants associés
Composant Composants de navigation
Un composant de navigation réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation et un bouton d’appel à l’action.
Composant de navigation skeuomorphe
Un composant de navigation conçu avec un style skeuomorphe, avec une palette de couleurs complémentaires, adapté à un tableau de bord avec visualisation de données et panneaux de contrôle. Il comprend des éléments interactifs pour l’engagement des utilisateurs.
Composant Composants de navigation
Un composant de navigation avec un thème sombre, un design réactif et sans JavaScript.