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

Sticky Navigation-Komponente

Eine reaktionsschnelle, klebrige Navigationsleiste, die den Material Design-Richtlinien folgt, mit einem Dunkelmodus.

Vorschau

HTML-Code 

<header class="bg-white dark:bg-gray-800 shadow fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <div class="container mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-2 text-xl font-semibold text-gray-800 dark:text-white">MyWebsite</h1>
        </div>
        <nav>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Services</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<main class="pt-16 bg-gray-100 dark:bg-gray-900">
    <section class="container mx-auto py-10">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Welcome to MyWebsite</h2>
        <p class="text-gray-700 dark:text-gray-300">This is a simple sticky navigation component built with Tailwind CSS. Scroll down to see the sticky effect in action.</p>
        <div class="mt-10 space-y-4">
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
            <div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
        </div>
    </section>
</main>

Verwandte Komponenten

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente mit Neumorphism-Design, komplementärem Farbschema, moderater Komplexität und reaktionsschneller Unterstützung für dunkle Themen für ein Dashboard. Das Design enthält weiche Schatten für den Neumorphismus-Effekt und verwendet Komplementärfarben, um eine optisch ansprechende Benutzeroberfläche zu schaffen. Es eignet sich für ein Dashboard, das Datenvisualisierung und Bedienfelder bereitstellt.

Offen

Sticky Navigation (Glasmorphismus)

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

Offen

Sticky Navigation Komponente - Neumorphismus

Eine reaktionsschnelle Sticky-Navigationskomponente mit Neumorphism-Design, komplementärem Farbschema und Unterstützung für dunkle Themen, die für eine Portfolio-Website geeignet ist. Verwendet Tailwind CSS mit Klassen im Dunkelmodus und enthält subtile Schatten für den Neumorphismus-Effekt.

Offen