Navigationskomponente
Eine reaktionsschnelle Navigationskomponente, die mit Tailwind CSS für den Dunkelmodus formatiert wurde.
HTML-Code
<nav class="bg-gray-900 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold">Brand</a>
<a href="#" class="hidden md:block">Home</a>
<a href="#" class="hidden md:block">About</a>
<a href="#" class="hidden md:block">Services</a>
<a href="#" class="hidden md:block">Contact</a>
</div>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
</div>
</div>
</nav>
<main class="bg-gray-800 min-h-screen p-4">
<h1 class="text-3xl mb-4">Welcome to Our Website</h1>
<img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
<p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>
<footer class="bg-gray-900 text-white p-4">
<div class="container mx-auto text-center">
<p>© 2023 Navigation Component. All rights reserved.</p>
</div>
</footer>Verwandte Komponenten
Brutalistischer E-Commerce Navigation
Eine Navigationskomponente im brutalistischen Stil für den E-Commerce mit einem Graustufen-Farbschema, einem komplexen Layout, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.
Bauhaus Wetter-Navi
Eine reaktionsschnelle Navigationskomponente für eine Wetter- und Klimaanwendung mit einem vom Bauhaus inspirierten Design mit geometrischen Formen, gedämpften Farben und vollständiger Unterstützung des Dunkelmodus.
Navigationskomponente
Eine reaktionsschnelle Navigationskomponente, die für die Benutzeroberfläche des Dunkelmodus entwickelt wurde, mit Links, Dropdown-Menüs und einem Logo, die alle mit Tailwind CSS gestaltet sind.