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

JobBoardNavigation

Eine einfache, reaktionsschnelle Navigationskomponente für eine Jobbörse oder eine Karriereentwicklungsplattform mit Ozean-/Blautönen, Mikrointeraktionen beim Schweben und Unterstützung des Dunkelmodus.

Offen

Monospace_Developer_Simple_Finance_Navigation

Eine einfache, saubere, vom Code inspirierte Navigationskomponente für Finanz-/Bankschnittstellen mit Monospace-Schriftarten, warmen Sonnenuntergangstönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

Navigation in sozialen Medien

Eine saubere, minimalistische Social-Media-Navigationskomponente mit einer waldgrünen Palette, die für responsive Layouts und den Dunkelmodus entwickelt wurde. Verfügt über eine Hauptnavigation, ein Benutzerprofil und eine Suche.

Offen