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 mapas de calor responsivo diseñado con una estética retro/vintage, que incorpora soporte para temas oscuros. Cuenta con secciones para un título, un subtítulo y un mapa con áreas resaltadas con calor, con imágenes aleatorias adicionales y avatares para una apariencia nostálgica.
Componente Mapas de calor
Un componente de mapa de calor responsivo simple diseñado con una estética Retro / Vintage utilizando un esquema de color pastel, adecuado para tableros. Cuenta con soporte para temas oscuros con Tailwind CSS.
Componente Mapas de calor
Un componente de mapas de calor para el consumo de blog/contenido, con un diseño responsivo con soporte para modo oscuro. Utiliza un esquema de color en escala de grises y una complejidad media con funciones interactivas. Sin JavaScript, HTML puro con Tailwind CSS.