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

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

Komponente zur Datenvisualisierung im Dunkelmodus

Eine komplexe, reaktionsschnelle Datenvisualisierungskomponente mit einem dunklen, monochromatischen Design. Verfügt über mehrere interaktive Visualisierungselemente, darunter ein Liniendiagramm, ein Balkendiagramm und Datenkarten. Enthält Hover-Effekte und nutzt die Unterstützung des Dunkelmodus von Tailwind. Geeignet für Blogs und Plattformen zum Konsum von Inhalten.

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