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

Skeuomorphe Navigationsleiste

Eine reaktionsschnelle Navigationsleistenkomponente, die in einem skeuomorphen Stil mit Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS entworfen wurde.

Offen

Skeuomorphe Navigationsleiste

Eine Komponente der Portfolio-Navigationsleiste, die mit skeuomorphen Stilen und einem pastellfarbenen Farbschema entwickelt wurde, einschließlich Unterstützung für den Dunkelmodus. Es verfügt über interaktive Elemente wie Links und ein Dropdown-Menü.

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