Memphis Sepia Dashboard
A dashboard component with a Memphis Design aesthetic, featuring bold geometric shapes and a warm sepia/brown color palette, suitable for business and corporate websites. Includes full responsiveness and dark mode support.
HTML Code
<div class="min-h-screen bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-8">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Header Section -->
<div class="md:col-span-3 lg:col-span-4 bg-amber-200 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 right-0 w-24 h-24 bg-stone-500 dark:bg-stone-800 transform -rotate-45 translate-x-1/3 translate-y-1/3"></div>
<div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<h1 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-amber-50 mb-2">Welcome, Marketing Team!</h1>
<p class="text-stone-700 dark:text-amber-100 text-lg">Here's your dashboard overview for today.</p>
</div>
<div class="mt-4 sm:mt-0">
<button class="px-6 py-3 bg-stone-800 dark:bg-amber-50 text-amber-50 dark:text-stone-800 rounded-full font-semibold shadow-md hover:bg-stone-700 dark:hover:bg-amber-100 transition duration-300 relative overflow-hidden group">
<span class="relative z-10">New Report</span>
<div class="absolute inset-0 bg-stone-900 dark:bg-amber-100 transform -skew-x-12 scale-0 group-hover:scale-100 transition-transform duration-300 origin-left"></div>
</button>
</div>
</div>
</div>
<!-- Card 1: Sales Overview -->
<div class="bg-amber-300 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-6 -right-8 w-24 h-24 bg-stone-500 dark:bg-amber-700 rounded-full"></div>
<div class="absolute bottom-2 -left-6 w-32 h-16 bg-amber-400 dark:bg-stone-800 transform skew-y-6"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Total Sales</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$12,450</p>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">+5.2% last month</span>
</div>
</div>
</div>
<!-- Card 2: New Customers -->
<div class="bg-stone-400 dark:bg-amber-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-24 h-24 bg-amber-500 dark:bg-stone-900 transform rotate-12 -translate-x-1/4 -translate-y-1/4"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-stone-700 dark:bg-amber-500 rounded-full"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">New Customers</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">289</p>
<div class="flex items-center text-red-700 dark:text-red-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 010 2H9a1 1 0 01-1-1v-4a1 1 0 012 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">-1.5% last month</span>
</div>
</div>
</div>
<!-- Card 3: Website Traffic -->
<div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-4 right-4 w-12 h-12 bg-amber-400 dark:bg-amber-600 transform rotate-45"></div>
<div class="absolute bottom-0 left-0 w-16 h-16 bg-stone-500 dark:bg-stone-700 rounded-br-full"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Website Traffic</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">78,123</p>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">+8.7% last month</span>
</div>
</div>
</div>
<!-- Card 4: Average Order Value (smaller, for lg screens) -->
<div class="hidden lg:block bg-amber-100 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-20 h-20 bg-stone-400 dark:bg-amber-600 transform -rotate-45 translate-x-1/3 -translate-y-1/3"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-amber-500 dark:bg-stone-900 transform rotate-45 translate-x-1/4 translate-y-1/4"></div>
<div class="relative z-10">
<h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Average Order</h2>
<p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$43.75</p>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="font-medium">+2.1% this month</span>
</div>
</div>
</div>
<!-- Large Card: Recent Activity -->
<div class="md:col-span-2 bg-stone-300 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-12 translate-x-1/4 -translate-y-1/4"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Recent Activity</h2>
<ul class="space-y-4">
<li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
<div>
<p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Jane Doe</span> purchased 'Product XYZ'</p>
<p class="text-sm text-stone-600 dark:text-amber-200">15 minutes ago</p>
</div>
</li>
<li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
<div>
<p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">John Smith</span> signed up for newsletter</p>
<p class="text-sm text-stone-600 dark:text-amber-200">1 hour ago</p>
</div>
</li>
<li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Avatar">
<div>
<p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Emily White</span> reviewed 'Service ABC'</p>
<p class="text-sm text-stone-600 dark:text-amber-200">3 hours ago</p>
</div>
</li>
</ul>
</div>
</div>
<!-- Large Card: Quick Links -->
<div class="md:col-span-1 lg:col-span-2 bg-amber-200 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
<div class="absolute top-0 left-0 w-24 h-24 bg-stone-500 dark:bg-amber-700 transform skew-y-12 -translate-x-1/2"></div>
<div class="absolute bottom-0 right-0 w-20 h-20 bg-amber-400 dark:bg-stone-800 rounded-tl-full"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Quick Access</h2>
<nav>
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<li class="group">
<a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 001.946.806L14.75 1.25M2 17.5V14h6v3.5l-2 2-2-2zM12 14v3.5l2 2 2-2V14h-4z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Analytics</span>
</a>
</li>
<li class="group">
<a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Messages</span>
</a>
</li>
<li class="group">
<a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM11 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Reports</span>
</a>
</li>
<li class="group">
<a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
<svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A6 6 0 0012 9a6 6 0 00-6 6zM13 13.5a2.5 2.5 0 00-5 0M9 20a1 1 0 110-2h2a1 1 0 110 2H9z"></path></svg>
<span class="font-semibold text-stone-800 dark:text-amber-50">Settings</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>Related Components
Dashboards Component
A dashboard component with responsive design and dark mode support using Tailwind CSS.
Luxury Agriculture Dashboard Component
An elegant and sophisticated dashboard component for agriculture and farming websites, featuring a black and white color scheme with a vibrant emerald accent. It includes key metrics, recent activities, and interactive elements, designed to be fully responsive and support dark mode.
Dashboard Component
A simple dashboard component with 3D design and pastel color scheme, responsive and with dark mode support.