Brutalist_Dating_Navigation_Simple
Eine einfache, brutalistisch inspirierte Navigationsleiste für eine Dating-/Social-Media-App mit kontrastreichen Elementen, warmen Neutraltönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.
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>
Verwandte Komponenten
Komponente "Navigationskomponenten"
Eine reaktionsschnelle Navigationskomponente mit lebendigen Farben und Mikrointeraktionen, die für ein Portfolio entwickelt wurde.
Neumorphe Social-Media-Navigation
Eine einfache, reaktionsschnelle Social-Media-Navigationskomponente mit einem neumorphen Design mit weicher Benutzeroberfläche. Es verwendet ein monochromatisches Farbschema und unterstützt den Dunkelmodus.
GamingNavigationComponent
Eine komplexe, reaktionsschnelle obere Navigationsleiste für Gaming-Websites, inspiriert von organischen/Naturthemen mit einem analogen Farbschema. Verfügt über ein Logo, Navigationslinks, einen Benutzer-Avatar und Call-to-Action-Schaltflächen mit vollständiger Unterstützung des Dunkelmodus.