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

Komponenten zur Verbesserung der Navigation

Eine einfache Komponente zur Verbesserung der Navigation im Dunkelmodus zur Präsentation eines Portfolios mit Tailwind CSS.

Vorschau

HTML-Code 

<nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="max-w-6xl mx-auto flex justify-between items-center">
        <h1 class="text-white text-xl font-bold">My Portfolio</h1>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
        </ul>
    </div>
</nav>

<section class="bg-gray-900 dark:bg-gray-800 p-8">
    <div class="max-w-6xl mx-auto text-center">
        <h2 class="text-white text-2xl font-bold">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 1</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 2</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 3</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
            </div>
        </div>
    </div>
</section>

<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
    <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Verwandte Komponenten

Mediennavigation im Dunkelmodus

Eine komplexe, reaktionsschnelle Navigationskomponente für Unterhaltungs-/Medienplattformen mit einer Benutzeroberfläche im Dunkelmodus mit einer Wald-/Grün-Farbpalette. Enthält ein Logo, eine Suchleiste, Navigationslinks, ein Benutzerprofil und eine Benachrichtigungsglocke.

Offen

Monospace_Booking_Navigation_Complex_Triadic

Eine komplexe Buchungs-/Reservierungsnavigationskomponente mit einer Monospace-/Entwickler-Ästhetik. Es verfügt über ein triadisches Farbschema, responsives Design und Unterstützung für den Dunkelmodus, ideal für Terminsysteme.

Offen

Komponenten zur Verbesserung der Navigation

Eine reaktionsschnelle Komponente zur Verbesserung der Navigation für einen Blog im Dunkelmodus mit lebendigen Farben und Funktionen zur moderaten Komplexität.

Offen