Componente de comercio electrónico de mapa de calor
Un componente minimalista de mapa de calor en escala de grises para comercio electrónico, con un diseño complejo e interactivo. Responsivo y admite el modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-900 p-4 shadow-md rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Product Activity Heat Map</h2>
<div class="grid grid-cols-31 gap-1">
<!-- Days of the week column -->
<div class="col-span-1 flex flex-col justify-around">
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Mon</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Tue</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Wed</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Thu</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Fri</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sat</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sun</div>
</div>
<!-- Heat map grid -->
<div class="col-span-30 grid grid-cols-30 gap-1">
<!-- Placeholder for days of the month (simplified) -->
<div class="col-span-30 grid grid-cols-30 gap-1">
<!-- Example cells with varying intensity -->
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
<!-- ... add more cells for the rest of the month ... -->
</div>
</div>
</div>
</div>
Componentes relacionados
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 mapa de calor de diseño minimalista y plano para tableros, con un esquema de color complementario, un diseño receptivo y compatibilidad con el modo oscuro. Muestra los niveles de actividad a lo largo del tiempo.
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.