CCHub Logo CCHub Tailwind Collection
Komponenten Armaturenbretter Dashboards-Komponente

Dashboards-Komponente

Eine reaktionsschnelle Dashboard-Komponente für Social-Media-Anwendungen mit Mikrointeraktionen und einem triadischen Farbschema, das mit Tailwind CSS erstellt wurde.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-teal-400 dark:bg-teal-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://picsum.photos/50/50" alt="Profile" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Check how users interact with your posts.</p>
            </div>
        </div>
        <div class="bg-orange-400 dark:bg-orange-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Followers</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">See your growth in followers over time.</p>
            </div>
        </div>
        <div class="bg-purple-400 dark:bg-purple-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Post Performance</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Evaluate the performance of your latest posts.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Dashboards-Komponente

Responsive Dashboards-Komponente mit Mikrointeraktionen, Graustufen-Farbschema und komplexer Komplexität, die auf Blog-/Content-Zwecke zugeschnitten sind. Unterstützt dunkles Design.

Offen

Dashboards-Komponente

Eine einfache, monochromatische Dashboard-Komponente im Dark-Modus für Portfolios, die mit Tailwind CSS erstellt wurde. Es verfügt über ein ansprechendes Design und verwendet verschiedene Schattierungen einer einzigen Farbe für einen schlanken, minimalistischen Look.

Offen

Art Deco Soziales Dashboard

Eine Dashboard-Komponente mittlerer Komplexität für Dating-/Social-Media-Plattformen mit einem Art-Déco-Designstil mit gedämpften/entsättigten Farben und voller Reaktionsfähigkeit. Enthält Profilkarten, Aktivitätsfeed und Navigation mit Unterstützung für den Dunkelmodus.

Offen