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

Komponente "Datenvisualisierung"

Neumorphism-Datenvisualisierungskomponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente "Komponenten der Datenvisualisierung"

Eine reaktionsschnelle Datenvisualisierungskomponente mit mehreren interaktiven Elementen, die für einen Blog/eine Content-Website entwickelt wurde. Es verfügt über ein minimalistisches/flaches Design, ein komplementäres Farbschema und unterstützt dunkle Themen.

Offen

Komponente zur Visualisierung von Neumorphism-Daten

Datenvisualisierungskomponente im Neumorphism-Stil für Blog-Inhalte mit pastellfarbenem Farbschema, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen