Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato con principi di Material Design come layout basati su griglia ed effetti di profondità, con supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Componente Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo e compatibile con la modalità oscura per i blog, caratterizzato da un design retrò/vintage con una combinazione di colori complementari ed elementi interattivi complessi.
Componenti di visualizzazione dei dati
Componenti di visualizzazione dei dati in stile neumorfismo per un portfolio con supporto del tema scuro
Componente di visualizzazione dei dati
Componente di visualizzazione dei dati di neumorfismo con effetti reattivi e supporto per temi scuri.