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

Sticky Navigation-Komponente

Eine klebrige Navigationskomponente in einem skeuomorphen Stil, die für E-Commerce-Websites mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS geeignet ist.

Vorschau

HTML-Code 

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg py-4 fixed w-full z-10">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 rounded-lg" />
            <h1 class="text-lg text-white font-bold">ShopEasy</h1>
        </div>
        <div class="hidden md:flex md:space-x-8">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Products</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">About Us</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="h-8 w-8 rounded-full" />
            </a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Cart</button>
        </div>
    </div>
</nav>

<main class="pt-24">
    <h2 class="text-3xl text-gray-800 dark:text-gray-200 text-center my-8">Welcome to ShopEasy!</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-8">Discover amazing products with unbeatable prices.</p>
    <div class="flex justify-center space-x-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="rounded-lg shadow-md" />
    </div>
</main>

Verwandte Komponenten

Sticky Navigation-Komponente

Eine reaktionsschnelle, klebrige Navigationskomponente mit minimalistischem Design, triadischem Farbschema und Unterstützung für dunkle Themen, die für Social-Media-Anwendungen geeignet ist.

Offen

Graustufen-Skeuomorphes Sticky Nav

Eine reaktionsschnelle Sticky-Navigationsleiste für Blogs, die mit Skeuomorphismus unter Verwendung einer Graustufenpalette gestaltet ist. Bietet Unterstützung für den Dunkelmodus und ein einfaches Layout. Erstellt mit Tailwind CSS (nur HTML), kein JavaScript. Das skeuomorphe Design zielt darauf ab, die Navigationsleiste wie ein physisches, leicht erhabenes Element erscheinen zu lassen.

Offen

Sticky Navigation-Komponente

Eine komplexe, skeuomorphe, klebrige Navigationsleiste mit leuchtenden Farben, die für Social-Media-Schnittstellen entwickelt wurde. Enthält Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Mit Profilbild, Suchleiste, Benachrichtigungen und Messaging-Symbolen.

Offen