Composants de visualisation de données
Composant Web pour la visualisation de données à l’aide du style Material Design avec Tailwind CSS, avec des mises en page réactives, la prise en charge des thèmes sombres et des images d’espace réservé.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-shadow duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Data Visualization Components</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Bar Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Bar Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A simple bar chart representing data.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Line Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Line Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A line chart visualizing trends over time.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Pie Chart</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Pie Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A pie chart displaying proportions.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Scatter Plot</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Scatter Plot" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A scatter plot illustrating distribution.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Area Chart</h3>
<img src="https://picsum.photos/300/200?random=5" alt="Area Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">An area chart showcasing cumulative data.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Histogram</h3>
<img src="https://picsum.photos/300/200?random=6" alt="Histogram" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A histogram demonstrating frequency distribution.</p>
</div>
</div>
<div class="mt-6 text-center">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow hover:bg-blue-600 transition duration-300">
View More
</button>
</div>
</div>Composants associés
Composant Composants de visualisation de données
Un composant simple de visualisation de données conçu pour le commerce électronique, doté d’une interface en mode sombre avec des couleurs vives.
Skeuomorphic_Vibrant_Blog_Viz
Un composant complexe et skeuomorphe de visualisation de données pour la consommation de blogs/contenus avec une palette de couleurs vives, conçu pour la réactivité et le mode sombre.
Composant de visualisation de données Art Déco
Il s’agit d’un composant complexe et réactif de visualisation de données de style Art déco pour les services de conseil, avec des motifs géométriques et une luxueuse palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.