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 par neumorphisme
Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.
Composant de navigation réactive
Composant de navigation réactif avec micro-interactions, palette de couleurs en niveaux de gris et complexité simple.
Navigation sur les réseaux sociaux Monospace
Il s’agit d’un composant de navigation complexe et réactif pour les applications de médias sociaux, doté d’une esthétique monospace/développeur avec des couleurs sourdes et une prise en charge du mode sombre. Comprend le profil utilisateur, la recherche, les notifications et les liens de navigation principaux.