CCHub Logo CCHub Tailwind Collection
Komponenten Charts Charts-Komponente

Charts-Komponente

Eine komplexe Diagrammkomponente, die für E-Commerce-Webanwendungen im Dunkelmodus mit einem Graustufen-Farbschema entwickelt wurde. Diese Komponente enthält mehrere interaktive Elemente wie Diagramme, Datenpunkte, QuickInfo und Schaltflächen mit responsivem Design mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg">Last 30 Days</span>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
    </div>
    <div class="relative">
        <img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
            <span class="text-xl font-semibold">$23,000</span>
            <span class="text-sm">Total Sales</span>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-around text-sm text-gray-400">
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 1</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 2</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 3</span>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Charts-Komponente

Eine Diagrammkomponente im brutalistischen Stil für Unternehmenswebsites mit einem triadischen Farbschema und moderater Komplexität. Es beinhaltet Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Cyberpunk Chart Komponente - Regierung/Öffentlich

Eine mäßig komplexe Diagrammkomponente mit Cyberpunk-Ästhetik, die sich für Websites von Behörden und öffentlichen Diensten eignet. Mit dunklem Hintergrund, hellen Neon-Akzenten und einer Retro-/Vintage-Farbpalette. Reaktionsschnell und mit Unterstützung für den Dunkelmodus.

Offen

Komponente "Skeuomorphe Diagramme"

Eine komplexe, reaktionsschnelle Diagrammkomponente mit einem skeuomorphen Design, einem warmen, neutralen Farbschema und Unterstützung für den Dunkelmodus, geeignet für Foren- oder Community-Dashboards.

Offen