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

Komponenten für die Datenvisualisierung

Eine Datenvisualisierungskomponente, die im brutalistischen Stil mit Tailwind CSS gestaltet wurde, mit responsiven Layouts und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Data Visualization</h2>
    <div class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0">
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Bar Chart</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Bar Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Pie Chart</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Pie Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
    </div>
    <div class="mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">User Statistics</h3>
        <div class="flex flex-wrap items-center space-x-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

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

Komponenten für die Datenvisualisierung

Eine reaktionsschnelle Datenvisualisierungskomponente, die mit Material Design-Prinzipien wie rasterbasierten Layouts und Tiefeneffekten entwickelt wurde, mit Unterstützung für dunkle Themen.

Offen

Komponenten für die Datenvisualisierung

Eine reaktionsschnelle Datenvisualisierungskomponente mit 3D-Designelementen mit Unterstützung für dunkle Themen.

Offen