CCHub Logo CCHub Tailwind Collection
Komponenten Armaturenbretter Dashboards-Komponente

Dashboards-Komponente

Eine Retro-inspirierte Dashboard-Komponente, die für Geschäfts- oder Unternehmenswebsites entwickelt wurde und die Ästhetik der 80er/90er Jahre mit einem modernen Layout und Farbschema kombiniert. Es ist reaktionsschnell und unterstützt ein dunkles Design mit interaktiven Elementen wie Karten für Statistiken, Benutzerprofilen und mehr.

Vorschau

HTML-Code 

<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
    <header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
        <button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Total Sales</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
            <img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Users</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
            <img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Feedback</h2>
            <p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
            <img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
            <h2 class="font-semibold text-lg">Team Members</h2>
            <div class="flex space-x-2 mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
            </div>
        </div>
    </main>
    <footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</div>

Verwandte Komponenten

Luxury/Premium Marketplace Dashboard-Komponente

Eine komplexe, reaktionsschnelle Dashboard-Komponente für einen Multi-Vendor-Marktplatz mit einem Luxus-/Premium-Designstil. Mit professionellem blauem Farbschema für Unternehmen, ausgefeilter Typografie und Unterstützung für den Dunkelmodus. Enthält Abschnitte für einen Überblick, die letzten Verkäufe, Top-Produkte und schnelle Statistiken.

Offen

Neumorphic_Forum_Dashboard

Eine einfache, reaktionsschnelle neumorphe Dashboard-Komponente mit einer Wald-/Grün-Farbpalette, die für Foren- und Community-Plattformen entwickelt wurde und Unterstützung für den Dunkelmodus bietet.

Offen

Social-Media-Dashboard

Eine reaktionsschnelle Social-Media-Dashboard-Komponente mit Mikrointeraktionen, komplementärem Farbschema, moderater Komplexität und Unterstützung für dunkle Themen mit Tailwind CSS. Enthält Benutzerprofile mit Avataren aus randomuser.me und Feeds mit Bildern aus picsum.photos.

Offen