CCHub Logo CCHub Tailwind Collection
Komponenten Navigationsleiste Komponente der Navigationsleiste 47

Komponente der Navigationsleiste 47

Eine reaktionsschnelle Navigationsleiste mit einem 3D-Designstil, der Tiefe und Engagement beinhaltet und dunkles Design unterstützt.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

Verwandte Komponenten

Portfolio-Navigationsleiste

Eine reaktionsschnelle Navigationsleiste mit Unterstützung für dunkle Themen, die für eine Portfolio-Website unter Verwendung von Material Design-Prinzipien und Erdtönen entwickelt wurde. Es enthält ein Markenlogo, Navigationslinks und einen Call-to-Action-Button. Das Design ist moderat komplex und passt sich unterschiedlichen Bildschirmgrößen an.

Offen

Minimalistische Navigationsleiste

Eine reaktionsschnelle Navigationsleistenkomponente in einem minimalistischen Stil, die ein dunkles Design unterstützt und Tailwind CSS verwendet.

Offen

Komponente der Navigationsleiste

Eine reaktionsschnelle Navigationsleiste für ein Dashboard mit einem Dark-Mode-Design mit Erdtönen. Enthält ein Logo, Navigationslinks, eine Suchleiste und einen Abschnitt mit Benutzerprofil. Konzipiert für moderate Komplexität mit interaktiven Elementen.

Offen