Glassmorphism Disposition du tableau de bord
Une disposition simple pour un tableau de bord avec des éléments translucides ressemblant à du verre givré, avec une palette de couleurs pastel et une prise en charge du mode sombre.
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>Composants associés
Mise en page du portefeuille en mode sombre
Un composant de mise en page réactif en mode sombre pour les portfolios, avec une palette de couleurs monochromatiques à l’aide de Tailwind CSS. Inclut des espaces réservés pour le contenu et est conçu pour une complexité modérée sans JavaScript.
Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.
Composant de mise en page 3D
Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.