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.
Componente de diseño de comercio electrónico
Un componente de diseño de comercio electrónico responsivo con soporte para temas oscuros, construido con Tailwind CSS siguiendo los principios de Material Design. Incluye una barra de navegación, un área de contenido principal con listados de productos y un pie de página. La combinación de colores es pastel.
Componente Componentes de diseño
Un componente de diseño diseñado en un estilo skeuomórfico que imita a sus homólogos del mundo real, con elementos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.