CCHub Logo CCHub Tailwind Collection
Komponenten Layout-Komponenten Glassmorphism Dashboard-Layout

Glassmorphism Dashboard-Layout

Ein einfaches Glassmorphism-Layout für ein Armaturenbrett mit durchscheinenden, mattglasähnlichen Elementen, mit einem pastellfarbenen Farbschema und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 m-4 w-full max-w-3xl">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</h1>
        <div class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">User Statistics</h2>
                    <img src="https://picsum.photos/300/200?random=1" alt="User Statistics Image" class="w-full rounded-lg mt-2" />
                </div>
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">Recent Activities</h2>
                    <img src="https://picsum.photos/300/200?random=2" alt="Recent Activities Image" class="w-full rounded-lg mt-2" />
                </div>
            </div>
            <div class="mt-4 bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                <h2 class="font-medium text-gray-700 dark:text-gray-200">Control Panel</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Control Panel Image" class="w-full rounded-lg mt-2" />
            </div>
        </div>
        <div class="flex justify-between items-center mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <span class="ml-2 text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Logout</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Layout des Neumorphism-Portfolios

Ein einfaches, responsives Neumorphism-Layout für ein Portfolio, das den Dunkelmodus unterstützt.

Offen

E-Commerce-Layout-Komponente

Eine responsive E-Commerce-Layout-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS nach den Prinzipien des Material Designs erstellt wurde. Es enthält eine Navigationsleiste, einen Hauptinhaltsbereich mit Produktlisten und eine Fußzeile. Die Farbgebung ist pastellfarben.

Offen

3D-Layout-Komponente

Eine responsive 3D Design-Layoutkomponente für soziale Medien mit einem Graustufen-Farbschema. Geeignet für Schnittstellen in sozialen Netzwerken.

Offen