Composant de navigation collante
Une barre de navigation autocollante propre, fiable et simple, adaptée aux sites Web d’entreprise et d’événements. Dispose d’un monochrome noir et blanc avec une couleur d’accent vive, une réactivité totale et une prise en charge du mode sombre.
HTML Code
<header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
<svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
<span>EventName</span>
</a>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
<a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
</div>
<div class="md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</nav>
</header>Composants associés
Composant de navigation collante
Un composant de navigation autocollant pour le commerce électronique, avec un design minimaliste/plat avec des couleurs vives. Il comprend un logo, une barre de recherche, une icône de panier et un avatar de l’utilisateur, le tout stylisé avec Tailwind CSS pour la réactivité et la prise en charge du thème sombre.
Composant de navigation collante
Un composant de navigation autocollant conçu pour le mode sombre avec des effets réactifs utilisant Tailwind CSS.
Composant de navigation autocollant - Pastel neumorphe
Un composant de navigation complexe et collant avec un style de conception Neumorphism et une palette de couleurs pastel, adapté à la documentation ou aux sites wiki. Il propose des éléments de navigation imbriqués, une barre de recherche et la prise en charge du mode sombre, le tout implémenté avec HTML et Tailwind CSS pour une réactivité totale.