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

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 - 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

Sticky Navigation-Komponente

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

Offen