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.
Código HTML
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
<div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
<p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
<p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
<p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
<p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<ul class="space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Componentes relacionados
Panel de control de redes sociales
Un componente de panel de control de redes sociales receptivo con microinteracciones, combinación de colores complementaria, complejidad moderada y compatibilidad con temas oscuros mediante Tailwind CSS. Incluye perfiles de usuario con avatares de randomuser.me y feeds con imágenes de picsum.photos.
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 tablero de escala de grises brutalista
Un diseño de panel de control simple, de estilo brutalista, en escala de grises para sitios web comerciales / corporativos, receptivo con soporte para modo oscuro, construido con Tailwind CSS.