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
Un composant de navigation réactif conçu avec des micro-interactions et proposant des animations attrayantes basées sur les actions de l’utilisateur, prenant en charge les thèmes clairs et sombres. Le composant comprend un avatar de profil, des liens de navigation et des effets de survol.
Néon Glow Gouvernement Navigation
Un composant de navigation réactif pour les services gouvernementaux/publics avec une lueur néon, une palette de couleurs douces et une prise en charge du mode sombre. Présente des éléments lumineux et lumineux avec des effets d’éclairage vibrants.
Composant Composants de navigation
Un composant de navigation rétro-vintage pour un tableau de bord, avec une mise en page complexe avec des couleurs complémentaires, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation, une barre de recherche et des informations de profil utilisateur.