Composants d’amélioration de la navigation
Un composant de navigation conçu avec le skeuomorphisme, avec des éléments numériques qui imitent leurs homologues du monde réel. Il est stylisé à l’aide de Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-screen-lg mx-auto transition-all duration-300 ease-in-out">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<div class="space-x-4 hidden md:flex">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="md:flex md:items-center mt-4 space-x-4 hidden">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 shadow-md">
<span class="text-gray-800 dark:text-white">User Name</span>
</div>
</nav>
<!-- Mobile Menu -->
<div class="md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mt-2 transition-all duration-300 ease-in-out">
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Services</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>
<style>
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: white;
}
}
</style>Composants associés
Composant d’amélioration de la navigation
Un composant de navigation réactif conçu pour le mode sombre avec Tailwind CSS, avec des espaces réservés pour les logos, les images et les avatars.
Composant d’amélioration de la navigation
Un composant de navigation inspiré du glassmorphisme conçu pour présenter des travaux et des produits de portfolio avec prise en charge des tons de terre et du mode sombre. Le composant présente un effet de verre givré, un design réactif et des éléments minimaux.
Nature-Inspired_Entertainment_Navigation
Un composant de navigation complexe, inspiré de la nature, pour les plateformes de divertissement et de médias, avec des lignes fluides et des combinaisons de couleurs sucrées. Entièrement réactif avec prise en charge du mode sombre.