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

Sticky Navigation-Komponente

Eine reaktionsschnelle, klebrige Navigationsleiste, die mit Mikrointeraktionen und einem triadischen Farbschema gestaltet ist und sich für Blogs und den Konsum von Inhalten eignet.

Vorschau

HTML-Code 

<header class="bg-blue-300 dark:bg-blue-800 fixed top-0 w-full shadow-md z-10 transition-all duration-300 ease-in-out">
    <div class="flex justify-between items-center p-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold transition-transform transform hover:scale-105">MyBlog</a>
        <nav class="space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Blog</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="bg-blue-400 dark:bg-blue-700 h-1 transition-all duration-300 ease-in-out" style="transform: scaleY(0.5);"></div>
</header>

<main class="pt-20 px-4">
    <section class="my-8">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest Articles</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
            <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
                    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
                </div>
            </article>
        </div>
    </section>
</main>

<footer class="bg-gray-300 dark:bg-gray-700 p-4 text-center">
    <p class="text-gray-800 dark:text-gray-200">&copy; 2023 MyBlog. All rights reserved.</p>
</footer>

Verwandte Komponenten

Sticky Navigation-Komponente - Dunkler Modus Pastell

Eine klebrige Navigationsleiste für den Dunkelmodus mit einem responsiven Layout und pastellfarbenen Akzenten. Die Navigationsleiste verbleibt beim Scrollen des Benutzers am oberen Rand des Viewports, wodurch die Benutzerfreundlichkeit für inhaltsintensive Seiten verbessert wird. Es enthält Platzhalter für ein Logo oder einen Website-Titel sowie Navigationslinks, die mit Tailwind CSS gestaltet sind, um ein modernes, sauberes Aussehen zu erzielen.

Offen

Sticky Navigation-Komponente

Eine skeuomorphe Sticky-Navigationskomponente, die für Nachrichten-/Journalismus-Websites entwickelt wurde, mit einem Schwarz-Weiß-Farbschema mit einer hellen Akzentfarbe, Reaktionsfähigkeit und Unterstützung des Dunkelmodus. Es ahmt reale Knöpfe und vertiefte Elemente nach.

Offen

Sticky Navigation-Komponente

Eine komplexe, reaktionsschnelle Sticky-Navigationskomponente mit einer 3D-Designästhetik und einer Farbpalette in Wald/Grün, die für Anwendungen im Gesundheitswesen und in der Medizin geeignet ist. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen