Componente Mapas de calor
Un componente de mapas de calor diseñado con un estilo brutalista con alto contraste y diseños inusuales que utilizan Tailwind CSS. Admite efectos responsivos y un tema oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
<div class="grid grid-cols-3 gap-4">
<div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">20%</div>
</div>
<div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-black font-bold text-lg">50%</div>
</div>
<div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">75%</div>
</div>
<div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">40%</div>
</div>
<div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">90%</div>
</div>
<div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
<div class="relative z-10 text-white font-bold text-lg">60%</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
</div>
</div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>Componentes relacionados
Componente Mapas de calor
Un componente de mapa de calor lúdico y divertido para sitios web de noticias y periodismo, con un diseño brillante y alegre con elementos redondeados y una estética amigable, utilizando un esquema de color azul corporativo. Incluye capacidad de respuesta y soporte para modo oscuro.
Componente Mapas de calor
Un componente de mapas de calor diseñado con estilo glassmorphism, con tonos tierra. El diseño es simple, consta de elementos básicos destinados a uso comercial / corporativo, y admite el modo oscuro.
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.