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
Composant Graphiques
Un composant de graphiques complexe conçu pour les sites Web d’entreprise et d’entreprise, avec une conception 3D, une palette de couleurs complémentaire et une structure réactive avec prise en charge du mode sombre.
Composant Graphiques
Un composant de graphique simple et réactif avec des couleurs pastel et la prise en charge du mode sombre, conçu pour la consommation de blogs/contenus avec des micro-interactions subtiles via des effets de survol. Pas de JavaScript.
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.