Componente Mapas de calor
Un componente de mapa de calor responsivo diseñado con efectos de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado y soporte para estilos de temas oscuros, utilizando Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente Mapas de calor
Un componente de mapas de calor responsivo diseñado para el modo oscuro con Tailwind CSS, con imágenes de marcador de posición aleatorias y avatares de usuario.
Mapa de Calor Componente 42
Un componente de mapa de calor responsivo diseñado con estilo Neumorphism usando Tailwind CSS, compatible con el modo oscuro y con imágenes y avatares aleatorios.
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.