Componentes de visualización de datos
Un componente de visualización de datos con capacidad de respuesta diseñado con los principios de Material Design, como diseños basados en cuadrículas y efectos de profundidad, con soporte para temas oscuros.
Código 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>Componentes relacionados
Componente de componentes de visualización de datos
Un componente de visualización de datos responsivo y compatible con el modo oscuro para blogs, con un diseño retro/vintage con una combinación de colores complementaria y elementos interactivos complejos.
Componentes de visualización de datos
Un componente de visualización de datos diseñado en estilo brutalista con Tailwind CSS, con diseños responsivos y compatibilidad con temas oscuros.
Componente de visualización de datos
Componente de visualización de datos de neumorfismo con efectos responsivos y compatibilidad con temas oscuros.