CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Sticky Navigation-Komponente

Sticky Navigation-Komponente

Eine reaktionsschnelle, klebrige Navigationskomponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet wurde, ein dunkles Design aufweist und zufällige Platzhalterbilder und Avatare enthält.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
    <div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="pt-16">
    <header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
    </header>
    <section class="p-8">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
        </div>
    </section>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1f2937;
        }
    }
</style>

Verwandte Komponenten

Sticky Navigation (Glasmorphismus)

Sticky Navigation Component mit Unterstützung für Glassmorphism-Stil, responsive und Dark Theme.

Offen

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente im Dunkelmodus für den E-Commerce, die ein komplementäres Farbschema und ein grundlegendes Layout verwendet.

Offen

Sticky Navigation-Komponente

Eine klebrige Navigationskomponente für den E-Commerce mit einem minimalistischen/flachen Design mit leuchtenden Farben. Es enthält ein Logo, eine Suchleiste, ein Warenkorbsymbol und einen Benutzer-Avatar, die alle mit Tailwind CSS gestaltet sind, um Reaktionsfähigkeit und Unterstützung für dunkle Themen zu gewährleisten.

Offen