CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten zur Verbesserung der Navigation Komponenten zur Verbesserung der Navigation

Komponenten zur Verbesserung der Navigation

Eine Navigationskomponente im Neumorphism-Stil mit Unterstützung für den Dunkelmodus und responsivem Design

Vorschau

HTML-Code 

<nav class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-4 flex flex-col md:flex-row items-center justify-between transition-all duration-300">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md mb-2">
        <span class="text-xl font-semibold text-gray-800 dark:text-gray-200 ml-2">Brand Name</span>
    </div>
    <div class="flex flex-col md:flex-row md:space-x-4 mt-4 md:mt-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Contact</a>
    </div>
    <div class="mt-4 md:mt-0">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
    </div>
</nav>

Verwandte Komponenten

Komponente "Navigationsverbesserungskomponenten"

Eine komplexe, brutalistisch anmutende Navigationskomponente für Unternehmenswebsites mit analogem Farbschema, responsivem Design und Unterstützung des Dunkelmodus. Zeichnet sich durch ungewöhnliche Layouts und hohen Kontrast aus.

Offen

Komponenten zur Verbesserung der Navigation

Eine responsive Navigationskomponente, die mit Material Design-Konzepten unter Verwendung von Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Designs und Platzhalterbildern.

Offen

Komponente zur Verbesserung der Navigation

Eine reaktionsschnelle Navigationskomponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde und Platzhalter für Logos, Bilder und Avatare enthält.

Offen