Composant Graphiques
Un composant de graphiques réactif de style 3D avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-4xl mx-auto p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl text-center font-bold mb-5 text-gray-900 dark:text-gray-100">3D Charts Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=1" alt="Chart Image 1" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 1</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 1 with some insightful data visualizations.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=2" alt="Chart Image 2" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 2</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 2 with engaging three-dimensional data models.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=3" alt="Chart Image 3" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 3</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 3 with innovative 3D elements.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200?random=4" alt="Chart Image 4" class="w-full h-32 object-cover rounded-b-lg">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 4</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description of chart 4 that highlights key metrics.</p>
</div>
</div>
</div>
<div class="mt-5 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
<p class="text-gray-700 dark:text-gray-300">Created by John Doe</p>
</div>
</div>Composants associés
Composant Graphiques
Un composant de graphiques simple et minimaliste avec des effets réactifs et une prise en charge du thème sombre.
SkeuomorphismChartsComponent
Composant de graphiques skeuomorphes pour les médias sociaux avec des couleurs complémentaires
Composant Graphiques
Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.