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
Skeuomorphe Navigation
Eine einfache, reaktionsschnelle Navigationskomponente mit Skeuomorphem Design, analogem Farbschema, das für Social-Media-Anwendungen geeignet ist, mit Unterstützung für dunkle Themen.
Retro-E-Commerce-Navigationsleiste
Eine Graustufen-Navigationskomponente im Retro-/Vintage-Stil für den E-Commerce mit moderater Komplexität und interaktiven Elementen wie Hovers und Dropdowns. Es ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.
Skeuomorphe Navigationskomponente
Eine Navigationskomponente im skeuomorphen Stil mit einem komplementären Farbschema, das für ein Dashboard mit Datenvisualisierung und Bedienfeldern geeignet ist. Es enthält interaktive Elemente für die Benutzerbindung.