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

Komponente zur Verbesserung der Navigation

Eine Komponente zur Verbesserung der Navigation, die in einem brutalistischen Stil gestaltet ist. Mit responsiven Effekten, Unterstützung für dunkle Themen und Platzhalterbildern.

Offen

Komponenten zur Verbesserung der Navigation

Eine responsive Navigationskomponente, die mit Material Design-Konzepten unter Verwendung von Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Designs und Platzhalterbildern.

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