Navigations-Komponenten
Eine minimalistische Navigationskomponente für eine E-Commerce-Website mit Logo, Suchleiste, Navigationslinks, Warenkorbsymbol und Benutzeravatar mit Tailwind CSS. Diese Komponente unterstützt responsives Design und den Dunkelmodus.
HTML-Code
<nav class="bg-white dark:bg-gray-800 p-4 flex items-center justify-between"> <div class="flex items-center"> <img src="https://picsum.photos/100/50" alt="Logo" class="h-10 mr-4"> <ul class="hidden md:flex space-x-8 text-gray-700 dark:text-gray-300"> <li><a href="#" class="hover:underline">Home</a></li> <li><a href="#" class="hover:underline">Shop</a></li> <li><a href="#" class="hover:underline">About</a></li> <li><a href="#" class="hover:underline">Contact</a></li> </ul> </div> <div class="flex items-center"> <div class="relative"> <input type="text" placeholder="Search" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600"><span class="absolute left-3 top-2 text-gray-400 dark:text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M16.65 10.65A5.48 5.48 0 0015 12a5.48 5.48 0 01-1.65 4.35A5.48 5.48 0 0012 17a5.48 5.48 0 00-4.35-1.65A5.48 5.48 0 007 12a5.48 5.48 0 011.65-4.35A5.48 5.48 0 0012 7c1.3 0 2.57.47 3.65 1.65z"/></svg></span> </div> <a href="#" class="ml-4 text-gray-700 dark:text-gray-300 relative"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18M3 12h18M3 21h18"/></svg> <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs">0</span> </a> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 rounded-full h-10 w-10"> </div> <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg> </button></nav>Verwandte Komponenten
Portfolio-Navigation im Dunkelmodus
Eine komplexe, reaktionsschnelle Navigationskomponente für eine Portfolio-Website mit einer Dark-Mode-Benutzeroberfläche mit analogen Farben, die zur Präsentation von Arbeiten oder Produkten entwickelt wurde. Enthält Desktop-, Tablet- und mobile Layouts mit Dropdown-Menüs und Benutzer-Avatar.
Komponente "Navigationskomponenten"
Eine reaktionsschnelle Navigationskomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es enthält ein Logo, Navigationslinks und einen Call-to-Action-Button.
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.