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
Social Media Dashboard
A responsive social media dashboard component with microinteractions, complementary color scheme, moderate complexity, and dark theme support using Tailwind CSS. Includes user profiles with avatars from randomuser.me and feeds with images from picsum.photos.
Brutalist Grayscale Dashboard Component
A simple, brutalist-style, grayscale dashboard layout for business/corporate websites, responsive with dark mode support, built with Tailwind CSS.
Dashboards Component
Responsive Dashboards Component with Microinteractions, Grayscale color scheme, and Complex complexity level tailored for Blog/Content purpose. Supports dark theme.