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.
Código HTML
<div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Monthly Activity Heatmap</h2>
<div class="grid grid-cols-7 gap-1 ">
<!-- Days of the week -->
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sun</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Mon</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Tue</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Wed</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Thu</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Fri</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sat</div>
<!-- Heatmap cells (example for 4 weeks) -->
{[...Array(28)].map((_, i) => (
`<div key={i} class="relative w-8 h-8 md:w-10 md:h-10 transform perspective-1000 -rotate-x-15 rotate-y-15 p-1">
<div class="absolute inset-0 rounded-md shadow-lg transition-all duration-300 transform
${i % 7 === 0 ? "bg-red-500 dark:bg-red-700" : ""}
${i % 7 === 1 ? "bg-red-600 dark:bg-red-800" : ""}
${i % 7 === 2 ? "bg-orange-500 dark:bg-orange-700" : ""}
${i % 7 === 3 ? "bg-orange-600 dark:bg-orange-800" : ""}
${i % 7 === 4 ? "bg-red-700 dark:bg-red-900" : ""}
${i % 7 === 5 ? "bg-red-800 dark:bg-red-950" : ""}
${i % 7 === 6 ? "bg-orange-700 dark:bg-orange-900" : ""}
hover:scale-110 hover:rotate-x-0 hover:rotate-y-0
group-hover:opacity-75
flex items-center justify-center
text-white text-xs font-bold
">
${i + 1}
</div>
</div>`
)).join("")}
</div>
<div class="mt-4 flex justify-between text-gray-600 dark:text-gray-400">
<span>Less</span>
<div class="flex space-x-1">
<div class="w-4 h-4 bg-red-400 dark:bg-red-600 rounded"></div>
<div class="w-4 h-4 bg-red-500 dark:bg-red-700 rounded"></div>
<div class="w-4 h-4 bg-red-600 dark:bg-red-800 rounded"></div>
<div class="w-4 h-4 bg-red-700 dark:bg-red-900 rounded"></div>
<div class="w-4 h-4 bg-red-800 dark:bg-red-950 rounded"></div>
</div>
<span>More</span>
</div>
</div>
Componentes relacionados
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.
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.
Componente Mapas de calor
Un componente de mapas de calor responsivo diseñado con morfismo de vidrio y un esquema de color análogo para interfaces de redes sociales.