Brutalist_Dating_Navigation_Simple
Une barre de navigation simple, d’inspiration brutaliste, pour une application de rencontre/sociale, avec des éléments très contrastés, des neutres chauds et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<nav class="bg-stone-200 dark:bg-stone-900 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<div class="flex items-center space-x-2">
<a href="#" class="font-black text-2xl tracking-tighter text-stone-900 dark:text-stone-50 uppercase border-2 border-stone-900 dark:border-stone-50 px-2 py-1 transform -rotate-3 hover:rotate-0 transition-transform duration-200 ease-out">
<span class="text-orange-600 dark:text-orange-400">FLIRT</span>
<span class="hidden sm:inline">NET</span>
</a>
</div>
<ul class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 text-sm font-bold uppercase">
<li>
<a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
Matches
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
Explore
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
Messages
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
Profile
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
</a>
</li>
</ul>
</div>
</nav>Composants associés
Composant de navigation dans les médias sociaux
Un composant de navigation simple et réactif pour les applications de médias sociaux, avec un thème sombre et une palette de couleurs complémentaires inspirée de Material Design. Il comprend un logo, des liens de navigation et un avatar utilisateur.
Composant de navigation
Un composant de navigation complexe conçu en 3D pour les blogs, avec une palette de couleurs triadique et une prise en charge réactive du thème sombre.
Cyberpunk Météo Navigation
Un composant de navigation simple et réactif sur le thème du cyberpunk pour une application météo, avec des couleurs sourdes et des accents néon, avec prise en charge du mode sombre.