CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Navigationskomponente 43

Navigationskomponente 43

Eine reaktionsschnelle Navigationskomponente, die skeuomorphen Designprinzipien folgt, mit digitalen Elementen, die ihre realen Gegenstücke nachahmen, mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<nav class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg p-4">
    <div class="flex justify-between items-center">
        <a href="#" class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-lg font-bold text-gray-800 dark:text-gray-200">MyApp</span>
        </a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            </button>
        </div>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
    </div>
</nav>

Verwandte Komponenten

Komponente "Navigationskomponenten"

Eine Navigationskomponente mit einem dunklen Design, responsivem Design und ohne JavaScript.

Offen

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.

Offen

Navigations-Komponenten

Eine Navigationskomponente im brutalistischen Stil mit einem pastellfarbenen Farbschema für Social-Media-Oberflächen, mit einem responsiven Layout und Unterstützung für dunkle Themen.

Offen