Composant de navigation
Un composant de navigation d’inspiration rétro/vintage conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<nav class="bg-gray-800 text-white py-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-xl font-bold hover:text-gray-400 transition duration-300">RetroNav</a>
<ul class="hidden md:flex space-x-4">
<li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
<li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
<li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
<li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
</ul>
</div>
<div class="md:hidden">
<button class="text-gray-400 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>
</nav>
<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
<h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
<p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
<span class="font-semibold">User Name</span>
</div>
</div>
<style>
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: white;
}
nav {
background-color: #2c2c2c;
}
}
</style>Composants associés
Composant de navigation
Un composant de navigation simple conçu pour un blog avec des micro-interactions et une palette de couleurs pastel. Il dispose d’une mise en page réactive et d’un support de thème sombre.
RétroNav
Un composant de navigation simple, réactif et compatible avec le mode sombre avec un design rétro/vintage, une palette de couleurs vives et des éléments minimaux, adapté aux sites Web de commerce électronique.
Composante de navigation brutaliste du commerce électronique
Un composant de navigation e-commerce complexe et brutaliste utilisant Tailwind CSS, avec un schéma de couleurs triadique (jaune, cyan, fuchsia) avec un contraste élevé (noir/blanc), un méga-menu CSS uniquement, une révélation de recherche CSS uniquement, un menu mobile réactif CSS uniquement et la prise en charge du mode sombre. HTML uniquement, pas de JavaScript.