Componente Mapas de calor
Un componente de mapas de calor responsivo con Tailwind CSS, con microinteracciones y compatibilidad con temas oscuros, utilizando imágenes de marcador de posición y avatares.
Código HTML
<div class="max-w-4xl mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=1" alt="Heat Map 1">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Population Density</h3>
<p class="text-gray-600 dark:text-gray-400">Visual representation of population density across regions.</p>
</div>
</div>
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=2" alt="Heat Map 2">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Traffic Patterns</h3>
<p class="text-gray-600 dark:text-gray-400">Analyzing traffic flow across different times of the day.</p>
</div>
</div>
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=3" alt="Heat Map 3">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Heatmap</h3>
<p class="text-gray-600 dark:text-gray-400">Distribution of sales revenue across various regions.</p>
</div>
</div>
<!-- Heat Map Item -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=4" alt="Heat Map 4">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
<p class="text-gray-600 dark:text-gray-400">Tracking user interaction levels on the website.</p>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Componentes relacionados
Componente Mapas de calor
Un componente de mapa de calor responsivo diseñado con efectos de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado y soporte para estilos de temas oscuros, utilizando Tailwind CSS.
Componente Mapas de calor
Un componente de mapa de calor sensible para aplicaciones industriales/de fabricación, con un diseño inspirado en el papel/impresión y una combinación de colores océano/azul. Incluye soporte para modo oscuro y HTML semántico.
Componente Mapas de calor
Un componente de mapas de calor receptivo con una estética retro / vintage, diseñado para fines de blog / contenido, con elementos interactivos y soporte para temas oscuros.