Componente de contenedor (panel de control, 'Panel')
Componente de contenedor responsivo con soporte de tema oscuro, diseñado para paneles con microinteracciones y un esquema de color análogo.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="max-w-7xl mx-auto">
<!-- Header/Navigation Placeholder -->
<header class="flex justify-between items-center py-4 px-6 bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Analytics</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Settings</a></li>
</ul>
</nav>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Sales Overview -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sales Overview</h2>
<span class="text-green-500 dark:text-green-400 text-sm font-medium">+12%</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">$12,345</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Total sales this month</p>
<div class="mt-4 h-24 bg-gradient-to-r from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded"></div>
</div>
<!-- Card 2: User Activity -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Activity</h2>
<span class="text-yellow-500 dark:text-yellow-400 text-sm font-medium">85% Engaged</span>
</div>
<div class="flex items-center space-x-3 mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-50">1,234</p>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm">Active users today</p>
<div class="mt-4 grid grid-cols-5 gap-2">
<div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
<div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
<div class="h-8 bg-purple-500 dark:bg-purple-800 rounded"></div>
<div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
<div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
</div>
</div>
<!-- Card 3: Traffic Sources -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Traffic Sources</h2>
<span class="text-red-500 dark:text-red-400 text-sm font-medium">Geo-targeted</span>
</div>
<ul class="space-y-2 mb-4">
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Direct</span>
<span class="font-semibold">30%</span>
</li>
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Referral</span>
<span class="font-semibold">25%</span>
</li>
<li class="flex justify-between text-gray-700 dark:text-gray-300">
<span>Organic Search</span>
<span class="font-semibold">45%</span>
</li>
</ul>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-indigo-500 h-2 rounded-full" style="width: 45%;"></div>
</div>
</div>
<!-- Card 4: Recent Orders (Full Width on Small Screens) -->
<div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Orders</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Customer</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Alice Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$199.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
Completed
</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Bob Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$89.50</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
Pending
</span>
</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</div>
</div>
<!-- Card 5: Quick Stats (Image Placeholder) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center text-center transform transition-transform duration-200 hover:scale-105 active:scale-95">
<img class="w-32 h-32 object-cover rounded-full mb-4 ring-2 ring-blue-400 dark:ring-blue-600" src="https://picsum.photos/256/256?random=1" alt="Placeholder Image">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Progress</h2>
<p class="text-4xl font-bold text-blue-600 dark:text-blue-400">75%</p>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Completed tasks</p>
</div>
</div>
<!-- Footer Placeholder -->
<footer class="mt-6 py-4 text-center text-gray-600 dark:text-gray-400 text-sm">
© 2023 Dashboard Inc. All rights reserved.
</footer>
</div>
</div>Componentes relacionados
Componente de contenedor
Un componente contenedor responsivo simple para el consumo de blog/contenido con microinteracciones y soporte de temas oscuros utilizando Tailwind CSS.
Contenedor de comercio electrónico de diseño de materiales
Un componente contenedor de comercio electrónico receptivo con una cuadrícula de productos, un resumen del carrito de compras y compatibilidad con temas oscuros, diseñado utilizando los principios de Material Design y una combinación de colores en tonos tierra. Cuenta con múltiples elementos interactivos, que incluyen tarjetas de productos con imágenes, títulos, precios y botones "Agregar al carrito", así como un resumen del carrito de compras adhesivo que se actualiza con los artículos agregados. El diseño se ajusta a diferentes tamaños de pantalla y todos los elementos tienen estilos de modo oscuro definidos con los prefijos dark: de Tailwind CSS.