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

Industrial_Sports_Dashboard

Eine Dashboard-Komponente mittlerer Komplexität für Sport-/Fitnessanwendungen im Industriedesign-Stil mit Erdtönen und responsivem Layout mit Unterstützung für den Dunkelmodus. Zeigt wichtige Metriken, die letzten Aktivitäten und die Team-/Einzelleistung an.

Offen

Dashboards-Komponente

Dashboards-Komponente mit Neumorphism-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Dashboards-Komponente

Eine einfache und reaktionsschnelle Dashboard-Komponente, die für die Präsentation von Portfolios entwickelt wurde, mit Mikrointeraktionen und Fokus auf Erdtöne. Es unterstützt dunkles Theme mit Tailwind CSS.

Offen