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 de visualisation des données en mode sombre
Un composant de visualisation de données complexe et réactif conçu avec un thème monochrome sombre. Dispose de plusieurs éléments de visualisation interactifs, notamment un graphique linéaire, un graphique à barres et des cartes de données. Comprend des effets de vol stationnaire et utilise la prise en charge du mode sombre de Tailwind. Convient aux blogs et aux plateformes de consommation de contenu.
Composant Composants de visualisation de données
Un composant de visualisation de données simple, propre et inspiré du code pour la documentation/les sites wiki, avec des polices monospace, une esthétique terminale et des tons de couleur sépia/marron, avec une réactivité totale et une prise en charge du mode sombre.
Composants de visualisation de données
Un composant de visualisation de données e-commerce simple et réactif avec un style de conception glassmorphism et une palette de couleurs monochromatiques, avec prise en charge du mode sombre.