CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten zur Verbesserung der Navigation Komponente zur Verbesserung der Navigation

Komponente zur Verbesserung der Navigation

Eine reaktionsschnelle Navigationskomponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde und Platzhalter für Logos, Bilder und Avatare enthält.

Vorschau

HTML-Code 

<nav class="bg-gray-900 text-white p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="mr-3 rounded-full">
            <span class="text-xl font-bold">MyApp</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-300">Home</a>
            <a href="#" class="hover:text-gray-300">About</a>
            <a href="#" class="hover:text-gray-300">Services</a>
            <a href="#" class="hover:text-gray-300">Contact</a>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-700">
            <button class="ml-4 p-2 bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Menu</button>
        </div>
    </div>
</nav>
<div class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex flex-col md:flex-row md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-lg">
            <p class="ml-4">This is a simple navigation enhancement component in dark mode.</p>
        </div>
        <div class="flex space-x-4">
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 1</a>
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 2</a>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #fff;
        }
    }
</style>

Verwandte Komponenten

Industrial_Monochromatic_Navigation

Eine komplexe, auf den Dunkelmodus fokussierte Navigationskomponente für Industrie- und Fertigungsunternehmen mit monochromatischem Design und mehreren interaktiven Elementen, die für Dashboards und Betriebsoberflächen geeignet sind.

Offen

Komponenten zur Verbesserung der Navigation

Eine Navigationskomponente mit einer Brutalismus-Ästhetik mit auffälligen Designs, hohem Kontrast und ungewöhnlichen Layouts. Es enthält responsive Effekte und unterstützt dunkle Designs mit CSS.

Offen

Komponente zur Verbesserung der Navigation

Eine responsive Navigationskomponente, die im Material Design-Stil mit Tailwind CSS entworfen wurde, mit Unterstützung für dunkle Themen und responsiven Effekten.

Offen