Panel de control de componentes funcionales
Un componente de tablero receptivo diseñado con los principios de Material Design y un esquema de color monocromático. Cuenta con diseños basados en cuadrículas, elementos interactivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
<img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
<img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
<img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
<p class="text-gray-600 dark:text-gray-400">User Name</p>
<p class="text-gray-500 dark:text-gray-500">User Email</p>
</div>
</div>
</div>Componentes relacionados
Tarjeta de reserva inspirada en papel/impresión
Un componente de tarjeta de reserva/reserva simple y receptivo con un diseño inspirado en el papel/impresión y una combinación de colores en tonos tierra, con soporte para el modo oscuro. Adecuado para mostrar las franjas horarias de las citas o los detalles de las reservas.
Controles del reproductor de música Glassmorphic
Un componente de control de reproductor de música glassmorphic con tonos sepia/marrón, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque. Es responsivo, admite el modo oscuro y es adecuado para plataformas de audio y transmisión de música.
Microinteractions_Triadic_Dashboard_Component
Un componente de panel de control receptivo con esquema de color triádico, que incorpora microinteracciones para la participación del usuario. Cuenta con elementos y controles de visualización de datos, con soporte completo para el modo oscuro.