Diseño del panel de control de Glassmorphism
Un diseño simple de morfismo de vidrio para un tablero con elementos translúcidos similares al vidrio esmerilado, con un esquema de color pastel y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente Componentes de diseño
Un componente de diseño de tablero receptivo con un tema oscuro, con una barra lateral y un área de contenido principal. Utiliza un esquema de color triádico para el atractivo visual.
Diseño del reproductor de música Cyberpunk
Un diseño de reproductor de música de temática cyberpunk con estética de neón futurista, fondos oscuros y colores de acento vibrantes, diseñado para brindar capacidad de respuesta y compatibilidad con el modo oscuro.
Diseño de Portafolio
Un componente de diseño responsivo simple para un portafolio que se centra en microinteracciones con colores complementarios, compatibilidad con modo oscuro y elementos mínimos.