CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Navigationskomponente

Navigationskomponente

Eine reaktionsschnelle Navigationskomponente, die mit Mikrointeraktionen entwickelt wurde und ansprechende Animationen bietet, die auf Benutzeraktionen basieren und sowohl helle als auch dunkle Themen unterstützen. Die Komponente enthält einen Profil-Avatar, Navigationslinks und Hover-Effekte.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
        <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
    </div>
</nav>

Verwandte Komponenten

Navigationskomponente

Eine komplexe Navigationskomponente im 3D-Design für Blogs mit einem triadischen Farbschema und reaktionsschneller Unterstützung für dunkle Themen.

Offen

Komponente "Navigationskomponenten"

Eine Retro-Vintage-Navigationskomponente für ein Dashboard mit einem komplexen Layout mit Komplementärfarben, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es enthält ein Logo, Navigationslinks, eine Suchleiste und Benutzerprofilinformationen.

Offen

Neumorphe Social-Media-Navigation

Eine einfache, reaktionsschnelle Social-Media-Navigationskomponente mit einem neumorphen Design mit weicher Benutzeroberfläche. Es verwendet ein monochromatisches Farbschema und unterstützt den Dunkelmodus.

Offen