Dashboard Component
A simple dashboard component with 3D design and pastel color scheme, responsive and with dark mode support.
HTML Code
<div class="flex flex-wrap bg-gray-100 dark:bg-gray-900">
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-blue rounded-lg shadow-xl px-5 py-4">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
<i class="fas fa-users fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
</div>
</div>
<div class="flex-1 text-right md:text-center">
<h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Users</h2>
<p class="font-bold text-3xl text-gray-800 dark:text-gray-200">2,156 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 10%</span></p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-pink rounded-lg shadow-xl px-5 py-4">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
<i class="fas fa-chart-line fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
</div>
</div>
<div class="flex-1 text-right md:text-center">
<h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Sales</h2>
<p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$5,340 <span class="text-pastel-red text-base"><i class="fas fa-arrow-down"></i> 5%</span></p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/3 p-6">
<div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-yellow rounded-lg shadow-xl px-5 py-4">
<div class="flex flex-row items-center">
<div class="flex-shrink pr-4">
<div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
<i class="fas fa-wallet fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
</div>
</div>
<div class="flex-1 text-right md:text-center">
<h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Revenue</h2>
<p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$1,234 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 12%</span></p>
</div>
</div>
</div>
</div>
</div>Related Components
Brutalist_Dating_Dashboard
A brutalist-style dashboard component for dating and social platforms, featuring bold design, high contrast, and a purple/violet color scheme. Responsive with dark mode support.
Dashboards Component
A complex dashboards component designed for dark mode with a monochromatic color scheme for business/corporate use. It features rich interactive elements and is responsive.
Dashboard_Weather_Climate_Swiss
A complex, responsive weather and climate dashboard component inspired by Swiss/International Typography, using earth tones and supporting dark mode. Features multiple data points like current weather, forecast, air quality, and climate trends.