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 zur Verbesserung der Navigation

Eine reaktionsschnelle Navigationskomponente, die für ein Portfolio entwickelt wurde und einen Brutalismus-Stil mit einem pastellfarbenen Farbschema und Unterstützung für den Dunkelmodus verwendet.

Offen

Komponente zur Verbesserung der Navigation

Eine Komponente zur Verbesserung der Navigation, die in einem brutalistischen Stil gestaltet ist. Mit responsiven Effekten, Unterstützung für dunkle Themen und Platzhalterbildern.

Offen

Komponente zur Verbesserung der Navigation

Eine responsive Navigationskomponente, die im Material Design-Stil mit Tailwind CSS entworfen wurde, mit Unterstützung für dunkle Themen und responsiven Effekten.

Offen