Componente Paneles
Un componente de tablero minimalista que muestra un diseño plano con efectos responsivos y soporte para temas oscuros, construido con Tailwind CSS.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
<p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
<img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
</div>
</div>
<div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
<li class="py-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
<div>
<p class="text-gray-800 dark:text-white">Mike Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</li>
</ul>
</div>
</div>
</div>Componentes relacionados
Componente Paneles
Un componente de paneles de control simple y receptivo diseñado para la exhibición de cartera, con microinteracciones y centrado en los tonos tierra. Es compatible con el tema oscuro usando Tailwind CSS.
Componente de panel de control
Un componente de tablero simple con diseño 3D y combinación de colores pastel, responsivo y con soporte para modo oscuro.
Componente Paneles
Un componente de tablero receptivo diseñado con elementos 3D y tonos Tierra, que muestra visualización de datos y paneles de control con soporte para temas oscuros.