Componente de mapa de calor neumórfico
Un componente de mapa de calor neumórfico receptivo con un esquema de color triádico, diseñado para sitios web comerciales y corporativos. Cuenta con sombras suaves y compatibilidad con el modo oscuro, mostrando visualmente la intensidad de los datos.
Código HTML
<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 transition-colors duration-300">
<div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-850 p-6 sm:p-8 rounded-2xl shadow-xl dark:shadow-xl-dark transition-all duration-300 transform
neumorphic-light dark:neumorphic-dark
border border-gray-300 dark:border-gray-700">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Website Activity Heatmap</h2>
<div class="relative inline-block text-left">
<button type="button" class="inline-flex justify-center w-full rounded-xl border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gray-200 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 neumorphic-button-light dark:neumorphic-button-dark" id="menu-button" aria-expanded="true" aria-haspopup="true">
Last 30 Days
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="overflow-x-auto pb-4">
<div class="grid grid-cols-7 gap-2 sm:gap-3 lg:gap-4 min-w-[500px]">
<!-- Days Row -->
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Mon</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Tue</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Wed</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Thu</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Fri</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sat</div>
<div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sun</div>
<!-- Heatmap Grid Cells -->
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.1;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-95" style="--intensity: 0.95;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-100" style="--intensity: 1.0;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-85" style="--intensity: 0.85;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
<div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-5" style="--intensity: 0.05;"></div>
</div>
</div>
<div class="mt-6 flex flex-col sm:flex-row justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
<div class="flex items-center space-x-2 mb-4 sm:mb-0">
<span class="font-medium">Intensity:</span>
<div class="w-16 h-4 rounded-full bg-blue-300 dark:bg-blue-600 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
<div class="w-16 h-4 rounded-full bg-blue-500 dark:bg-blue-500 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
<div class="w-16 h-4 rounded-full bg-blue-700 dark:bg-blue-400 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
<span>Low</span>
<span>High</span>
</div>
<p class="text-center sm:text-right">Last updated: <span class="font-semibold">Yesterday, 3:45 PM</span></p>
</div>
<style>
/* Base background color and custom properties for neumorphism */
.bg-gray-850 {
background-color: #27272a;
}
.neumorphic-light {
box-shadow: 8px 8px 16px #acacac, -8px -8px 16px #ffffff;
}
.dark\:neumorphic-dark {
box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
}
/* Neumorphic buttons */
.neumorphic-button-light {
box-shadow: 4px 4px 8px #bdbdbd, -4px -4px 8px #ffffff;
}
.neumorphic-button-light:hover {
box-shadow: 2px 2px 4px #bdbdbd, -2px -2px 4px #ffffff;
transform: translateY(1px);
}
.dark\:neumorphic-button-dark {
box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
}
.dark\:neumorphic-button-dark:hover {
box-shadow: 2px 2px 4px #1a1a1a, -2px -2px 4px #333333;
transform: translateY(1px);
}
/* Heatmap cells */
.neumorphic-cell-light {
width: 40px;
height: 40px;
min-width: 32px;
min-height: 32px;
max-width: 60px;
max-height: 60px; /* Constraints for responsiveness */
aspect-ratio: 1 / 1;
border-radius: 8px;
background-color: hsl(200, 70%, 50%); /* Blue - primary triadic color */
box-shadow: inset 3px 3px 6px #acacac, inset -3px -3px 6px #ffffff;
transition: all 0.2s ease-in-out;
}
@media (min-width: 640px) {
.neumorphic-cell-light {
width: 50px;
height: 50px;
}
}
@media (min-width: 768px) {
.neumorphic-cell-light {
width: 55px;
height: 55px;
}
}
@media (min-width: 1024px) {
.neumorphic-cell-light {
width: 60px;
height: 60px;
}
}
.dark\:neumorphic-cell-dark {
background-color: hsl(200, 70%, 40%); /* Darker blue */
box-shadow: inset 3px 3px 6px #1a1a1a, inset -3px -3px 6px #333333;
border: 1px solid rgba(255,255,255,0.05);
}
/* Intensity-based color variation for cells (applied via --intensity custom property) */
.neumorphic-cell-light[style*='--intensity'] {
background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(50% - var(--intensity, 0.5) * 10%)); /* Hue shift towards green/yellow, saturation/lightness adjust */
}
.dark\:neumorphic-cell-dark[style*='--intensity'] {
background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(40% + var(--intensity, 0.5) * 10%)); /* Darker base, shifts to lighter/more saturated with intensity */
}
/* Inner shadows for intensity legend */
.neumorphic-inner-light {
box-shadow: inset 2px 2px 4px #acacac, inset -2px -2px 4px #ffffff;
}
.dark\:neumorphic-inner-dark {
box-shadow: inset 2px 2px 4px #1a1a1a, inset -2px -2px 4px #333333;
}
/* Triadic Color Scheme: Blue (Primary), Red-Orange, Green/Yellow for Accent/Highlight */
/* Blue: hsl(200, 70%, 50%) -> Tailwind equivalent: blue-500, blue-300, blue-700 */
/* Red-Orange: hsl(20, 70%, 50%) - could be used for danger/alert, not directly used in this heatmap intensity but good for overall palette */
/* Green/Yellow: hsl(140, 70%, 50%) - subtle shift for higher intensity in light mode or as accent */
/* The heatmap uses a subtle hue shift within the blue family for intensity, blending towards a greener blue for 'high' */
/* The `bg-blue-300`, `bg-blue-500`, `bg-blue-700` in the legend illustrate intensity levels */
</style>
</div>
</div>Componentes relacionados
Luxury_Premium_Heatmap_Component
Un elegante y sofisticado componente de mapa de calor de color triádico diseñado para sitios web de noticias y periodismo, que muestra la popularidad o la participación de los artículos. Cuenta con tipografía refinada, degradados sutiles y capacidad de respuesta total con soporte para modo oscuro.
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.
Componente Mapas de calor
Un componente de mapa de calor 3D con un esquema de color análogo, adecuado para una cartera. Es sensible y admite el modo oscuro.