Container Component (Dashboard, 'Dashboard')
Responsive Container Component with dark theme support, designed for dashboards with microinteractions and an analogous color scheme.
HTML Code
<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>Related Components
Material Design E-commerce Container
A responsive e-commerce container component with a product grid, shopping cart summary, and dark theme support, designed using Material Design principles and an Earth tones color scheme. It features multiple interactive elements, including product cards with images, titles, prices, and "Add to Cart" buttons, as well as a sticky shopping cart summary that updates with added items. The layout adjusts for different screen sizes, and all elements have dark mode styles defined with Tailwind CSS dark: prefixes.
Neumorphic Social Media Container
A simple Neumorphic container component for social media, with grayscale colors and dark mode support.
Container Component
A retro/vintage styled container component for portfolios, with a monochromatic color scheme and dark mode support.