CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Skeuomorphe Navigationskomponente

Skeuomorphe Navigationskomponente

Eine Navigationskomponente im skeuomorphen Stil mit einem komplementären Farbschema, das für ein Dashboard mit Datenvisualisierung und Bedienfeldern geeignet ist. Es enthält interaktive Elemente für die Benutzerbindung.

Vorschau

HTML-Code 

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

Verwandte Komponenten

Brutalistische soziale Navigation

Eine einfache, brutalistische Navigationskomponente für Social Media mit Komplementärfarben. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Offen

Verspielte Graustufen-Krypto-Navigationskomponente

Eine verspielte und benutzerfreundliche Graustufen-Navigationskomponente für Kryptowährungs- und Blockchain-Anwendungen mit abgerundeten Elementen, interaktiven Zuständen, vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Navigations-Komponenten

Eine minimalistische Navigationskomponente für eine E-Commerce-Website mit Logo, Suchleiste, Navigationslinks, Warenkorbsymbol und Benutzeravatar mit Tailwind CSS. Diese Komponente unterstützt responsives Design und den Dunkelmodus.

Offen