Composant Graphiques
Un composant de graphiques de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs triadique et une complexité modérée. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-6xl mx-auto">
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
<h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Chart 1 -->
<div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
<h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
<div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
<div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
<div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
<div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
<div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
</div>
<div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
<span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
</div>
</div>
<!-- Chart 2 -->
<div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
<h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
<div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
<div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
<div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
<div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
<div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
</div>
<div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
<span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
</div>
</div>
<!-- Chart 3 -->
<div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
<h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
<div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
<div class="flex items-end h-full">
<div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
<div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
</div>
</div>
<div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
<span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
</div>
</div>
</div>
</div>
<!-- Additional Section for more data or controls -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
<h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
<p class="text-4xl">1.2M</p>
<p>Total Sales</p>
</div>
<div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
<p class="text-4xl">15%</p>
<p>Growth Rate</p>
</div>
<div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
<p class="text-4xl">£250K</p>
<p>Net Profit</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Graphique à barres en mode sombre
Graphique à barres réactif pour l’affichage des données avec prise en charge du mode sombre.
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.
Industrial_Retro_RealEstate_Charts
Composant de graphiques simple avec une esthétique immobilière industrielle et rétro, avec des couleurs sourdes, des éléments exposés et un design réactif avec prise en charge du mode sombre.