Mapa de Calor Componente 42
Un componente de mapa de calor responsivo diseñado con estilo Neumorphism usando Tailwind CSS, compatible con el modo oscuro y con imágenes y avatares aleatorios.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 px-4">
<h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Heat Map Component</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
<!-- Sample Heat Map Item -->
<div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=1" alt="Random Image" />
<p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 1</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: High</p>
</div>
<div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=2" alt="Random Image" />
<p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 2</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Medium</p>
</div>
<div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
<img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=3" alt="Random Image" />
<p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 3</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Low</p>
</div>
<!-- More heat map items can be added here -->
</div>
</div>Componentes relacionados
Componente Mapas de calor
Un componente de mapa de calor receptivo para una cartera, diseñado con un fondo oscuro y colores vibrantes de alta saturación para reducir la fatiga visual y crear energía. Incluye una cuadrícula similar a un calendario para visualizar la actividad, información sobre herramientas interactiva (aunque la funcionalidad no se implementa según la regla 'sin JavaScript', el marcador de posición visual está presente) y una leyenda de color.
Componente Mapas de calor
Un componente de mapa de calor simple y receptivo para sitios web de agricultura/ganadería, con un esquema de color retro/vintage y soporte para modo oscuro, diseñado teniendo en cuenta las microinteracciones.
Componente Mapas de calor
Un componente de mapa de calor 3D receptivo con colores complementarios, adecuado para el blog y el consumo de contenido, con soporte para modo oscuro.