Componente Mapas de calor
Un componente de mapas de calor responsivo con estilo de cristal, combinación de colores análoga y complejidad moderada para un portafolio, con soporte para temas oscuros.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition-all duration-300">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Activity Heatmap</h2>
<div class="grid grid-cols-7 gap-1 text-center text-sm text-gray-600 dark:text-gray-300 mb-2">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
<span>Sun</span>
</div>
<div class="grid grid-cols-7 gap-1">
<!-- Loop for weeks -->
{[...Array(4)].map((_, weekIndex) => (
// Loop for days
[...Array(7)].map((_, dayIndex) => {
const intensity = Math.floor(Math.random() * 5); // 0-4 for intensity
const colors = [
"bg-purple-200 dark:bg-purple-800",
"bg-purple-300 dark:bg-purple-700",
"bg-purple-400 dark:bg-purple-600",
"bg-purple-500 dark:bg-purple-500",
"bg-purple-600 dark:bg-purple-400"
];
return (
<div
key={`${weekIndex}-${dayIndex}`}
class={`h-8 w-full rounded-sm ${colors[intensity]} transform hover:scale-105 transition-transform duration-200 cursor-pointer`}
title={`Day ${dayIndex + 1}, Week ${weekIndex + 1}: Intensity ${intensity}`}
></div>
);
})
))}
</div>
<div class="flex justify-between items-center mt-6 text-gray-600 dark:text-gray-300 text-sm">
<span>Less</span>
<div class="flex space-x-1">
<div class="h-4 w-4 bg-purple-200 dark:bg-purple-800 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-300 dark:bg-purple-700 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-400 dark:bg-purple-600 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-500 dark:bg-purple-500 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-600 dark:bg-purple-400 rounded-sm"></div>
</div>
<span>More</span>
</div>
</div>
</div>
</div>
Componentes relacionados
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 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.
Componente Mapas de calor
Un componente de mapas de calor minimalista que muestra un portafolio con características interactivas, diseño responsivo y soporte de temas oscuros usando Tailwind CSS.