CCHub Logo CCHub Tailwind Collection
Komponenten Container Container-Komponente

Container-Komponente

Eine minimalistische Containerkomponente für ein Dashboard, das Tailwind CSS mit Unterstützung für den Dunkelmodus verwendet.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 1</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 2</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 3</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
    </div>
    <div class="mt-6 flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">User Name</span>
        </div>
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Action</button>
    </div>
</div>

Verwandte Komponenten

Brutalistische Container-Komponente

Eine einfache, aber mutige Container-Komponente mit einem brutalistischen Stil und einem lebendigen Farbschema, die für Geschäfts- oder Unternehmenswebsites geeignet ist und den Dunkelmodus mit Tailwind CSS unterstützt.

Offen

Behälter-Komponente 21

Eine reaktionsschnelle Container-Komponente im Retro-/Vintage-Stil mit Unterstützung für dunkle Themen.

Offen

Skeumorpher Behälter für soziale Medien

Ein skeuomorpher Social-Media-Container, der mit einem monochromatischen Schema gestaltet ist, mit weichen Schatten, subtilen Farbverläufen und abgerundeten Kanten, um reale Elemente wie Schaltflächen und Karten nachzuahmen, die sich für die Anzeige von Benutzerbeiträgen oder Profilen eignen. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen