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
Composants de navigation
Un composant de navigation réactif avec prise en charge des micro-interactions et des thèmes sombres, conçu à l’aide de Tailwind CSS.
Composants de navigation
Un composant de navigation minimaliste pour un site Web de commerce électronique, avec un logo, une barre de recherche, des liens de navigation, une icône de panier d’achat et un avatar de l’utilisateur à l’aide de Tailwind CSS. Ce composant prend en charge le responsive design et le mode sombre.
Navigation sur les réseaux sociaux
Un composant de navigation sur les réseaux sociaux propre et minimaliste avec une palette de vert forêt, conçu pour les mises en page réactives et le mode sombre. Dispose d’une navigation principale, d’un profil utilisateur et d’une recherche.