Composant Graphiques
Un composant de tableau de bord réactif démontrant un design skeuomorphe avec des couleurs pastel et la prise en charge du mode sombre, avec des graphiques à barres simulés, des graphiques linéaires et des indicateurs de performance clés utilisant du HTML pur et du CSS Tailwind. Aucun JavaScript n’est inclus ; Les graphiques sont des représentations visuelles.
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>Composants associés
Composant Graphiques
Un composant de graphiques minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Graphiques de skeuomorphisme
Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.
Composant Graphiques
Un composant de graphiques réactif de style 3D avec prise en charge du thème sombre à l’aide de Tailwind CSS.