CCHub Logo CCHub Tailwind Collection
Komponenten Navigation Skeuomorphe Navigationskomponente

Skeuomorphe Navigationskomponente

Eine Navigationskomponente, die in einem skeuomorphen Stil gestaltet ist, mit leuchtenden Farben und einem responsiven Layout, das für Blog-Inhalte geeignet ist. Es enthält interaktive Funktionen wie Hover-Effekte und ist für den Dunkelmodus optimiert.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
    <div class="flex items-center mb-4 md:mb-0">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
    </div>
    <ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
        </li>
    </ul>
</nav>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
        </div>
    </div>
</div>

Verwandte Komponenten

Navigationskomponente

Eine reaktionsschnelle Navigationskomponente, die mit Tailwind CSS für den Dunkelmodus formatiert wurde.

Offen

Neumorphism-Navigationskomponente

Neumorphism-Navigationskomponente, optimiert für Portfolio-Websites. Es verfügt über ein komplexes Layout mit mehreren interaktiven Elementen, ein responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Das Farbschema ist analog.

Offen

Brutalistischer E-Commerce Navigation

Eine Navigationskomponente im brutalistischen Stil für den E-Commerce mit einem Graustufen-Farbschema, einem komplexen Layout, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen