Composant de navigation rétro
Un composant de navigation de style rétro avec une esthétique vintage des années 80/90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-800 dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden">
<div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
</div>
</div>
</nav>
Composants associés
Composant de navigation rétro vintage
Un composant de navigation réactif conçu avec une esthétique rétro/vintage inspirée des styles des années 80/90, avec une palette de couleurs pastel. Convient aux interfaces de médias sociaux, y compris la prise en charge du mode sombre.
Composant de navigation dans les médias sociaux
Un composant de navigation réactif conçu pour les interfaces de médias sociaux, avec une esthétique Material Design utilisant un thème sombre avec Tailwind CSS.
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.