Charts Component
A responsive dashboard component demonstrating skeuomorphic design with pastel colors and dark mode support, featuring simulated bar charts, line charts, and key performance indicators using pure HTML and Tailwind CSS. No JavaScript is included; charts are visual representations.
HTML Code
<div class="min-h-screen p-4 sm:p-8
bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<!-- Dashboard Header -->
<header class="mb-8 p-6 rounded-xl relative
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
border border-gray-100 dark:border-gray-700
text-center
">
<h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
Analytics Dashboard
</h1>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
Data insights at a glance with a Classic UI
</p>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Card 1: Sales Overview (Bar Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
overflow-hidden
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>
<!-- Timeframe buttons (skeuomorphic) -->
<div class="flex space-x-2 mb-6">
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Daily</button>
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Monthly</button>
</div>
<!-- Chart Area - Recessed look -->
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative flex items-end justify-around space-x-2
">
<!-- Example Bar Chart bars -->
<div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
</div>
<!-- Legend -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
</div>
</div>
</div>
<!-- Card 2: User Engagement (Simulated Line Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative
">
<!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
<div class="absolute inset-0 flex items-end">
<div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
style="
clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
"></div>
</div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
</div>
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
</div>
</div>
</div>
<!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
flex items-center justify-center
">
<!-- Simple Circle Placeholder for Pie Chart -->
<div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
">
<div class="text-center">
<p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
<p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
</div>
</div>
</div>
<!-- Legend for segments -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
</div>
</div>
</div>
<!-- Card 4: Key Performance Indicators -->
<div class="
relative col-span-1 md:col-span-2 lg:col-span-3
rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
<div class="
min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
">
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
<p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
<p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
</div>
</div>
</div>
</div>
</div>
</div>Related Components
Glassmorphism Sales Chart
A simple, responsive chart component with a Glassmorphism style, vibrant color scheme, and dark mode support, suitable for e-commerce dashboards.
Charts Component
A simple, responsive chart component with pastel colors and dark mode support, designed for blog/content consumption with subtle microinteractions via hover effects. No JavaScript.
RetroChartsComponent
A retro/vintage chart component with responsive effects and dark theme support using Tailwind CSS. Includes placeholder images.