Mapa de Calor Componente 18
Un componente de mapa de calor receptivo diseñado en un estilo Brutalism con alto contraste, con imágenes de marcador de posición y soporte de avatar para el modo oscuro.
Código HTML
<div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region A</h3>
<p>High Activity</p>
</div>
</div>
<div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region B</h3>
<p>Moderate Activity</p>
</div>
</div>
<div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region C</h3>
<p>Low Activity</p>
</div>
</div>
<div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
<div class="relative z-10 text-black dark:text-white">
<h3 class="text-xl font-bold">Region D</h3>
<p>Very Low Activity</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
<div class="flex flex-wrap gap-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
</div>
</div>
</div>Componentes relacionados
Componente Mapas de calor
Un componente de mapas de calor responsivo diseñado con una estética retro/vintage, que incorpora soporte para temas oscuros. Cuenta con secciones para un título, un subtítulo y un mapa con áreas resaltadas con calor, con imágenes aleatorias adicionales y avatares para una apariencia nostálgica.
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.
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.