Composant de navigation collante
Une barre de navigation autocollante simple, propre et à contraste élevé avec une esthétique monospace/développeur, adaptée aux plateformes de divertissement ou de médias.
HTML Code
<nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo/Brand Section -->
<div class="flex items-center space-x-2">
<svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
</svg>
<span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
</div>
<!-- Desktop Navigation Links -->
<div class="hidden md:flex space-x-8">
<a href="#" class="hover:text-white transition duration-300">Discover</a>
<a href="#" class="hover:text-white transition duration-300">Browse</a>
<a href="#" class="hover:text-white transition duration-300">Live</a>
<a href="#" class="hover:text-white transition duration-300">Community</a>
</div>
<!-- Mobile Menu Button (Hamburger Icon) -->
<div class="md:hidden">
<button class="text-lime-400 focus:outline-none focus:text-white">
<svg class="h-6 w-6" 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>
</div>
<!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
<div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
<div class="flex flex-col items-center space-y-2 py-2">
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
<a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
</div>
</div>
</nav>
Composants associés
Composant de navigation collante
Composant de navigation autocollant réactif avec mode sombre
Composant de navigation collante
Un composant de navigation autocollant réactif stylisé selon les principes de conception matérielle à l’aide de Tailwind CSS, avec un thème sombre et incluant des images et un avatar aléatoires.
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.