CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Navigationskomponente "Brutalismus"

Navigationskomponente "Brutalismus"

Eine reaktionsschnelle Navigationskomponente im brutalistischen Stil mit einem monochromen Farbschema, ideal für eine Portfolio-Website. Zu den Funktionen gehören ein fettes Layout mit hohem Kontrast, Unterstützung für den Dunkelmodus mit Tailwind CSS und interaktive Elemente wie Dropdowns oder Schaltflächenlinks.

Vorschau

HTML-Code 

<nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
    <div class="text-white font-bold text-2xl">
        Portfolio
    </div>
    <ul class="flex space-x-6">
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
        </li>
    </ul>
    <div class="relative group">
        <button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
            Menu
        </button>
        <div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
        </div>
    </div>
</nav>

<section class="bg-gray-800 dark:bg-gray-900 p-10">
    <h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of project 1.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of project 2.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of project 3.</p>
            </div>
        </div>
    </div>
</section>

Verwandte Komponenten

Retro-E-Commerce-Navigationsleiste

Eine Graustufen-Navigationskomponente im Retro-/Vintage-Stil für den E-Commerce mit moderater Komplexität und interaktiven Elementen wie Hovers und Dropdowns. Es ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

RetroPortfolioNavigation

Retro/Vintage-Navigationskomponente für Portfolio mit Pastell-Farbschema, reaktionsschneller und Unterstützung für den Dunkelmodus.

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