Composants de visualisation de données
Un composant de visualisation de données réactif conçu avec les principes de Material Design tels que les mises en page basées sur une grille et les effets de profondeur, avec prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition-all ease-in-out duration-300">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Data Visualization</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 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 1</h3>
<img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 1 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 2</h3>
<img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 2 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 3</h3>
<img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 3 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 4</h3>
<img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 4 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 5</h3>
<img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 5 goes here.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-6 shadow hover:shadow-lg transition-shadow duration-300">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Chart 6</h3>
<img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded-lg mt-2" />
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of chart 6 goes here.</p>
</div>
</div>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all duration-200">Load More</button>
</div>
</div>Composants associés
Skeuomorphic_Vibrant_Business_Dashboard
Un composant de tableau de bord complexe, réactif et skeuomorphe aux couleurs vives, conçu pour une utilisation professionnelle/d’entreprise, avec des visualisations de données et des éléments interactifs avec 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.
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.