Componente de infografía
Un componente de infografía complejo con un estilo de diseño Skeuomorphism y una combinación de colores vibrantes, adecuado para plataformas de comercio electrónico. Es responsivo y admite el modo oscuro usando Tailwind CSS. Muestra varias estadísticas de productos con elementos interactivos.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-12 text-center drop-shadow-lg">E-commerce Performance Dashboard</h1>
<!-- Skeuomorphism Container for the Dashboard -->
<div class="bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 p-8 rounded-3xl shadow-inset-xl border-t border-l border-gray-400 dark:border-gray-600 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
<!-- Top Bezel / Highlight -->
<div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-white opacity-20 dark:from-gray-300 dark:opacity-10 rounded-t-3xl"></div>
<!-- Bottom Bezel / Shadow -->
<div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-black opacity-10 dark:from-gray-900 dark:opacity-20 rounded-b-3xl"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Sales Overview Card -->
<div class="bg-gradient-to-br from-emerald-400 to-teal-500 dark:from-emerald-700 dark:to-teal-800 p-6 rounded-2xl shadow-xl border border-emerald-300 dark:border-emerald-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10 flex items-center justify-between mb-4">
<h3 class="text-white text-xl font-bold drop-shadow-md">Total Sales</h3>
<div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-2 4a3 3 0 010 6m-9-4h4m-unset-24 0a3 3 0 010 6m-9-4h4L3 13.786A3.001 3.001 0 001 19c0 1.657 1.343 3 3 3h16c1.657 0 3-1.343 3-3 0-1.268-.787-2.378-1L12 21v-4m0-4c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2"></path></svg>
</div>
</div>
<p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$1,234,567</p>
<p class="text-emerald-100 text-sm opacity-90"><span class="text-white font-semibold">+15%</span> from last month</p>
<div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 5 min ago</div>
</div>
<!-- New Customers Card -->
<div class="bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-800 p-6 rounded-2xl shadow-xl border border-purple-400 dark:border-purple-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10 flex items-center justify-between mb-4">
<h3 class="text-white text-xl font-bold drop-shadow-md">New Customers</h3>
<div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2a2 2 0 002-2V4a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2m0 0l4-4m-4 4l4 4m0-4 4 4m0-4L9 15l4 4"></path></svg>
</div>
</div>
<p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">8,765</p>
<p class="text-purple-100 text-sm opacity-90"><span class="text-white font-semibold">+22%</span> from last month</p>
<div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 30 min ago</div>
</div>
<!-- Conversion Rate Card -->
<div class="bg-gradient-to-br from-red-500 to-rose-600 dark:from-red-700 dark:to-rose-800 p-6 rounded-2xl shadow-xl border border-red-400 dark:border-red-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10 flex items-center justify-between mb-4">
<h3 class="text-white text-xl font-bold drop-shadow-md">Conversion Rate</h3>
<div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L11 9m-11 5h8m0 0v8m0-8L3 14m-3 5h8m0 0v8m0-8L3 19"></path></svg>
</div>
</div>
<p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">3.24%</p>
<p class="text-red-100 text-sm opacity-90"><span class="text-white font-semibold">+0.5%</span> from last month</p>
<div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 1 hr ago</div>
</div>
<!-- Average Order Value Card -->
<div class="bg-gradient-to-br from-blue-500 to-cyan-600 dark:from-blue-700 dark:to-cyan-800 p-6 rounded-2xl shadow-xl border border-blue-400 dark:border-blue-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-700 dark:from-blue-800 dark:to-cyan-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10 flex items-center justify-between mb-4">
<h3 class="text-white text-xl font-bold drop-shadow-md">Avg. Order Value</h3>
<div class="bg-white/20 dark:bg-white/10 rounded-full p-2 backdrop-blur-sm shadow-inner-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.12 2-2.5 2S4 20.105 4 19s1.12-2 2.5-2 2.5.895 2.5 2zm12 0c0 1.105-1.12 2-2.5 2S16 20.105 16 19s1.12-2 2.5-2 2.5.895 2.5 2zm-8-19v13m0-12h8"></path></svg>
</div>
</div>
<p class="text-white text-5xl font-extrabold mb-2 drop-shadow-lg">$127.50</p>
<p class="text-blue-100 text-sm opacity-90"><span class="text-white font-semibold">-$5.00</span> from last month</p>
<div class="absolute bottom-4 right-4 text-white/50 dark:text-white/30 text-xs font-semibold">Updated 2 hrs ago</div>
</div>
<!-- Top Products Section -->
<div class="lg:col-span-2 bg-gradient-to-br from-slate-200 to-slate-400 dark:from-slate-700 dark:to-slate-800 p-6 rounded-2xl shadow-xl border border-slate-300 dark:border-slate-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-slate-300 to-slate-500 dark:from-slate-800 dark:to-slate-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10">
<h3 class="text-gray-900 dark:text-white text-2xl font-bold mb-6 drop-shadow-md">Top Selling Products</h3>
<div class="space-y-4">
<!-- Product Item 1 -->
<div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
<img src="https://picsum.photos/id/178/80/80" alt="Product 1" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Stylish Wireless Headphones</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Electronics</p>
</div>
<span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$199.99</span>
</div>
<!-- Product Item 2 -->
<div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
<img src="https://picsum.photos/id/180/80/80" alt="Product 2" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Ergonomic Office Chair</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Home & Office</p>
</div>
<span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$349.00</span>
</div>
<!-- Product Item 3 -->
<div class="flex items-center bg-gray-50/70 dark:bg-gray-800/70 rounded-xl p-3 shadow-inner-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
<img src="https://picsum.photos/id/182/80/80" alt="Product 3" class="w-16 h-16 rounded-lg mr-4 shadow-md object-cover border border-gray-300 dark:border-gray-600">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-semibold text-lg">Premium Coffee Maker</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Kitchen Appliances</p>
</div>
<span class="text-emerald-600 dark:text-emerald-400 font-bold text-lg">$89.50</span>
</div>
</div>
</div>
</div>
<!-- Recent Orders Section -->
<div class="bg-gradient-to-br from-orange-400 to-amber-500 dark:from-orange-700 dark:to-amber-800 p-6 rounded-2xl shadow-xl border border-orange-300 dark:border-orange-600 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-orange-600 to-amber-700 dark:from-orange-800 dark:to-amber-900 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10">
<h3 class="text-white text-2xl font-bold mb-6 drop-shadow-md">Recent Orders</h3>
<div class="space-y-4">
<!-- Order Item 1 -->
<div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
<img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
<div class="flex-grow">
<p class="text-white font-semibold text-lg">John Doe</p>
<p class="text-orange-100 text-sm">Order #12345 - $249.99</p>
</div>
<span class="text-white text-sm opacity-80">2 min ago</span>
</div>
<!-- Order Item 2 -->
<div class="flex items-center bg-white/20 dark:bg-white/10 rounded-xl p-3 shadow-inner-lg border border-white/30 dark:border-white/20 backdrop-blur-sm transform transition-transform duration-200 hover:translate-x-1">
<img src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full mr-4 shadow-md object-cover border border-white/50 dark:border-white/30">
<div class="flex-grow">
<p class="text-white font-semibold text-lg">Jane Smith</p>
<p class="text-orange-100 text-sm">Order #12344 - $75.00</p>
</div>
<span class="text-white text-sm opacity-80">15 min ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom Utility for Inset Shadow */
.shadow-inset-xl {
box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 -8px 16px rgba(255, 255, 255, 0.2);
}
.dark .shadow-inset-xl {
box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 -8px 16px rgba(100, 100, 100, 0.1);
}
.shadow-inner-lg {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Drop shadow for text to enhance relief effect */
.drop-shadow-lg {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.dark .drop-shadow-lg {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
Componentes relacionados
Componente de infografía
Un componente de infografía responsivo diseñado en un estilo skeuomórfico utilizando Tailwind CSS con soporte para temas oscuros. Imita elementos del mundo real para mostrar información visualmente.
Componente de infografía
Componente de infografía con diseño minimalista / plano, combinación de colores de tonos tierra, complejidad moderada para fines comerciales / corporativos, receptivo con soporte de modo oscuro.
Componente de infografía
Componente de infografía: interfaz de usuario de modo oscuro con diseño complejo y en escala de grises. Responsivo con soporte para temas oscuros.