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.
HTML Code
<div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
<div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
<div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex justify-between items-center mt-6 w-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
<div class="ml-3">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
</div>
</div>
</div>Composants associés
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.
SkeuomorphismChartsComponent
Composant de graphiques skeuomorphes pour les médias sociaux avec des couleurs complémentaires
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.