Componente Mapas de calor
Un componente de mapa de calor de diseño minimalista y plano con colores apagados, adecuado para sitios web de juegos. Cuenta con una visualización de cuadrícula de los niveles de actividad, responde en todos los dispositivos y admite el modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-6 sm:mb-8 text-center text-gray-900 dark:text-white">Weekly Activity Heatmap</h2>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">
<div class="grid grid-cols-8 gap-1 sm:gap-2 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400">
<div class="col-span-1 text-center hidden sm:block">Sun</div>
<div class="col-span-1 text-center hidden sm:block">Mon</div>
<div class="col-span-1 text-center hidden sm:block">Tue</div>
<div class="col-span-1 text-center hidden sm:block">Wed</div>
<div class="col-span-1 text-center hidden sm:block">Thu</div>
<div class="col-span-1 text-center hidden sm:block">Fri</div>
<div class="col-span-1 text-center hidden sm:block">Sat</div>
<div class="col-span-1 text-center hidden lg:block">Score</div>
<div class="col-span-7 grid grid-cols-7 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400 sm:hidden">
<div class="text-center">Sun</div>
<div class="text-center">Mon</div>
<div class="text-center">Tue</div>
<div class="text-center">Wed</div>
<div class="text-center">Thu</div>
<div class="text-center">Fri</div>
<div class="text-center">Sat</div>
</div>
</div>
<div class="grid grid-cols-8 sm:grid-cols-8 gap-1 sm:gap-2">
<!-- Example Row 1 - Day 1 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 10">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">10</span>
</div>
<!-- Day 2 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-200 dark:bg-green-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 30">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
</div>
<!-- Day 3 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-300 dark:bg-indigo-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 55">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">55</span>
</div>
<!-- Day 4 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-400 dark:bg-purple-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 78">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">78</span>
</div>
<!-- Day 5 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-400 dark:bg-red-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 92">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">92</span>
</div>
<!-- Day 6 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-300 dark:bg-blue-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 65">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">65</span>
</div>
<!-- Day 7 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-400 dark:bg-yellow-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 88">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">88</span>
</div>
<!-- Score Indicator -->
<div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">High</div>
<!-- Example Row 2 - Day 1 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-300 dark:bg-red-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 70">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">70</span>
</div>
<!-- Day 2 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-300 dark:bg-yellow-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 60">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">60</span>
</div>
<!-- Day 3 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 20">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">20</span>
</div>
<!-- Day 4 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-300 dark:bg-purple-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 45">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">45</span>
</div>
<!-- Day 5 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-400 dark:bg-green-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 80">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">80</span>
</div>
<!-- Day 6 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-200 dark:bg-indigo-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 35">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">35</span>
</div>
<!-- Day 7 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-400 dark:bg-blue-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 95">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">95</span>
</div>
<!-- Score Indicator -->
<div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Medium</div>
<!-- Add more rows as needed -->
<!-- Example Row 3 -->
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-200 dark:bg-blue-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 25">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">25</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-200 dark:bg-red-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 40">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">40</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-300 dark:bg-green-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 50">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">50</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-200 dark:bg-yellow-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 15">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">15</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-400 dark:bg-indigo-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 85">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">85</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-200 dark:bg-purple-700
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 30">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
</div>
<div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-200 dark:bg-gray-600
hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
relative flex items-center justify-center p-1" title="Score: 5">
<span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">05</span>
</div>
<div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Low</div>
</div>
<div class="flex justify-between items-center mt-6 sm:mt-8">
<div class="text-sm text-gray-600 dark:text-gray-400">Current Week: <span class="font-medium">Nov 27 - Dec 03</span></div>
<a href="#" class="text-sm font-semibold text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200">
View All Activity →
</a>
</div>
</div>
<div class="mt-8 text-center">
<h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Activity Insights</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
<p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Peak Activity Day:</p>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">Saturday</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Highest Engagement Score</p>
</div>
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
<p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Average Daily Score:</p>
<p class="text-4xl font-extrabold text-green-600 dark:text-green-400">67</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Across the entire week</p>
</div>
</div>
</div>
</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 responsivo diseñado con morfismo de vidrio y un esquema de color análogo para interfaces de redes sociales.
Componente de mapas de calor vibrantes de neumorfismo
Un componente de mapas de calor receptivo con diseño de neumorfismo, que utiliza un esquema de colores vibrantes y una complejidad moderada. Incluye soporte para modo oscuro y efectos de desplazamiento. Construido con HTML simple y clases CSS de Tailwind, complementado con un pequeño bloque CSS para sombras y niveles de color de Neumorphism personalizados.