CCHub Logo CCHub Tailwind Collection
Komponenten Navigationsleiste Skeuomorphe Navigationsleiste

Skeuomorphe Navigationsleiste

Eine einfache, reaktionsschnelle Navigationsleiste für soziale Medien mit einem skeuomorphen Designstil, der ein analoges Farbschema verwendet und den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

Verwandte Komponenten

3D_Corporate_Blues_Food_Restaurant_Nav

Eine komplexe, 3D-inspirierte Navigationsleiste für Food-/Restaurant-Websites mit Corporate Blues und voller Reaktionsfähigkeit mit Unterstützung für den Dunkelmodus. Enthält Elemente wie ein Logo, Navigationslinks, eine Suchleiste, einen Benutzer-Avatar und einen Warenkorb.

Offen

Brutalistische Navigationsleiste

Eine reaktionsschnelle Navigationsleiste in einem brutalistischen Stil mit Farben mit hoher Sättigung für den Konsum von Blogs und Inhalten mit Unterstützung für dunkle Themen.

Offen

Skeuomorphe Social-Media-Navigationsleiste

Skeuomorphe Social-Media-Navigationsleiste mit triadischem Farbschema und mäßiger Komplexität.

Offen