Infographics Component
A complex Infographics Component with a Skeuomorphism design style and a Vibrant color scheme, suitable for e-commerce platforms. It is responsive and supports dark mode using Tailwind CSS. It displays various product statistics with interactive elements.
HTML Code
<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>Related Components
Infographics Component
Infographics Component for portfolio - Material Design, Analogous color scheme, Moderate complexity, Responsive, Dark theme support
Infographics Component
A simple, responsive infographics component with 3D design elements and an analogous color scheme for blog/content use. It includes dark theme support using Tailwind CSS.
Retro Infographic
A simple, responsive retro/vintage infographic component for portfolios with dark mode support. Uses a complementary color scheme and minimal elements.