CCHub Logo CCHub Tailwind Collection
Komponenten Armaturenbretter Dashboards-Komponente

Dashboards-Komponente

Eine komplexe Dashboard-Komponente, die für den Dunkelmodus mit einem monochromatischen Farbschema für den Geschäfts-/Unternehmensgebrauch entwickelt wurde. Es verfügt über umfangreiche interaktive Elemente und ist reaktionsschnell.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
    <header class="bg-gray-800 p-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold">Dashboard</h1>
        <nav class="flex space-x-4">
            <a href="#" class="hover:underline">Home</a>
            <a href="#" class="hover:underline">Reports</a>
            <a href="#" class="hover:underline">Settings</a>
        </nav>
    </header>

    <main class="flex-1 p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Overview</h2>
            <img src="https://picsum.photos/400/200" alt="Overview Image" class="rounded-lg mb-2" />
            <p class="text-sm">Quick insights into the company metrics.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Stats</h2>
            <img src="https://picsum.photos/400/200?random=1" alt="Stats Image" class="rounded-lg mb-2" />
            <p class="text-sm">Detailed statistics overview.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Team</h2>
            <div class="flex flex-wrap">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
             </div>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Sales</h2>
            <img src="https://picsum.photos/400/200?random=2" alt="Sales Image" class="rounded-lg mb-2" />
            <p class="text-sm">Current sales metrics and trends.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Notifications</h2>
            <ul class="list-disc pl-5">
                <li class="text-sm">New project updates</li>
                <li class="text-sm">User feedback received</li>
                <li class="text-sm">System maintenance scheduled</li>
            </ul>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Activities</h2>
            <p class="text-sm">Recent team activities will be displayed here.</p>
        </div>
    </main>

    <footer class="bg-gray-800 p-4 text-center">
        <p class="text-sm">&copy; 2023 Your Company. 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

Dashboards-Komponente

Eine minimalistische Dashboard-Komponente, die ein flaches Design mit responsiven Effekten und Unterstützung für dunkle Themen präsentiert und mit Tailwind CSS erstellt wurde.

Offen

Gaming-Dashboard

Eine komplexe, reaktionsschnelle Gaming-Dashboard-UI-Komponente, die für den Dunkelmodus entwickelt wurde und ein Graustufen-Farbschema aufweist. Enthält Spielerstatistiken, aktuelle Aktivitäten und Spiellisten.

Offen