Componente Mapas de calor
Un componente de mapa de calor responsivo simple diseñado con una estética Retro / Vintage utilizando un esquema de color pastel, adecuado para tableros. Cuenta con soporte para temas oscuros con Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300">Heat Map</h2>
<div class="mt-4 grid grid-cols-3 gap-2">
<div class="bg-blue-300 dark:bg-blue-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/100/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-green-300 dark:bg-green-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/101/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-yellow-300 dark:bg-yellow-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/102/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-pink-300 dark:bg-pink-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/103/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-purple-300 dark:bg-purple-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/104/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
<div class="bg-red-300 dark:bg-red-700 h-24 rounded-lg flex items-center justify-center">
<img src="https://picsum.photos/105/100" alt="Sample Image" class="rounded-full border-4 border-white">
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-4 border-white">
<span class="ml-2 text-gray-700 dark:text-gray-300">User: John Doe</span>
</div>
<button class="bg-pink-500 dark:bg-pink-600 text-white font-semibold py-2 px-4 rounded">Action</button>
</div>
</div>Componentes relacionados
Componente Mapas de calor
Un componente de mapas de calor responsivo simple con un estilo de diseño 3D y una combinación de colores complementaria, diseñado para mostrar trabajos o productos con soporte para temas oscuros.
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 responsivo con estilo de cristal, combinación de colores análoga y complejidad moderada para un portafolio, con soporte para temas oscuros.