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 "Komponenten der Datenvisualisierung"

Eine komplexe, minimalistische Buchungs-/Reservierungskomponente mit einem Neon-/Elektro-Farbschema mit Datenvisualisierungselementen wie einem Kalender und einer Zeitfensterauswahl. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen

Sports_Fitness_Dashboard_Monospace

Eine saubere, vom Code inspirierte Sport-/Fitness-Dashboard-Komponente mit Monospace-Schriftarten, Terminal-Ästhetik und Ozean-/Blautönen. Es verfügt über responsives Design, Unterstützung für den Dunkelmodus und Datenvisualisierungselemente, die für Sportmannschaften und Fitnessanwendungen geeignet sind.

Offen

Komponente "Komponenten der Datenvisualisierung"

Eine reaktionsschnelle, mit dem Dunkelmodus kompatible Datenvisualisierungskomponente für Blogs mit einem Retro-/Vintage-Design mit einem komplementären Farbschema und komplexen interaktiven Elementen.

Offen