CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Datenvisualisierung Komponente "Datenvisualisierung"

Komponente "Datenvisualisierung"

Eine reaktionsschnelle Datenvisualisierungskomponente, die im Material Design-Stil mit einem pastellfarbenen Farbschema entworfen wurde und sich für die Präsentation von Portfolioarbeiten mit Unterstützung des Dunkelmodus eignet.

Vorschau

HTML-Code 

<div class="max-w-4xl mx-auto p-4">
    <h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Skeuomorphic_Vibrant_Business_Dashboard

Eine komplexe, reaktionsschnelle, skeuomorphe Dashboard-Komponente mit leuchtenden Farben, die für den Einsatz in Unternehmen entwickelt wurde und Datenvisualisierungen und interaktive Elemente mit Unterstützung des Dunkelmodus bietet.

Offen

Art-Déco-Komponente zur Datenvisualisierung

Eine komplexe, reaktionsschnelle Datenvisualisierungskomponente im Art-Déco-Stil für Beratungsdienstleistungen mit geometrischen Mustern und einem luxuriösen lila/violetten Farbschema. Enthält Unterstützung für den Dunkelmodus.

Offen

Weather_Climate_Retro_Dark_Dashboard

Eine einfache Dark-Mode-Dashboard-Komponente im Retro-Stil für Wetter- und Klimadaten, die auf allen Geräten reaktionsschnell ist.

Offen