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.
Código HTML
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-4 text-center">Portfolio Heat Maps</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-blue-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=1" alt="Project 1" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 1</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
<div class="bg-red-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=2" alt="Project 2" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 2</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
<div class="bg-green-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=3" alt="Project 3" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 3</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
<div class="bg-yellow-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/200?random=4" alt="Project 4" class="w-full h-40 object-cover" />
<div class="p-4">
<h3 class="font-semibold text-lg">Project Title 4</h3>
<p class="text-sm text-gray-200">Short description of the project.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="text-gray-300">Designer Name</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Mapas de calor
Un componente de mapas de calor en modo oscuro receptivo para la visualización de datos en un tablero, utilizando un esquema de color triádico.
Componente Mapas de calor
Un componente de mapa de calor con diseño minimalista, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. No se incluye JavaScript. Utiliza CSS para el estilo del 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.