Componente Mapas de calor
Un componente de mapas de calor receptivo con una estética retro / vintage, diseñado para fines de blog / contenido, con elementos interactivos y soporte para temas oscuros.
Código HTML
<div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-center mb-6">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4">
<h3 class="text-xl font-semibold">Popular Topics</h3>
<ul class="mt-2">
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 1 - <span class="font-medium">75%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 2 - <span class="font-medium">65%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 3 - <span class="font-medium">55%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 4 - <span class="font-medium">85%</span></li>
</ul>
</div>
<div class="bg-gradient-to-r from-blue-400 to-green-400 rounded-lg p-4">
<h3 class="text-xl font-semibold">Recent Reads</h3>
<div class="flex flex-col space-y-4 mt-2">
<div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
<div>
<h4 class="text-lg font-medium">Article Title 1</h4>
<p class="text-sm text-gray-400">Author Name</p>
</div>
</div>
<div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
<div>
<h4 class="text-lg font-medium">Article Title 2</h4>
<p class="text-sm text-gray-400">Author Name</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl font-bold text-center">Interactive Heat Map</h3>
<div class="relative mt-4">
<img src="https://picsum.photos/800/400" alt="Heat Map" class="w-full h-auto rounded-lg">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-between items-center">
<div class="p-2 bg-red-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">High Interest</p>
</div>
<div class="p-2 bg-yellow-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">Moderate Interest</p>
</div>
<div class="p-2 bg-green-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">Low Interest</p>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
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
Componente de mapas de calor con efectos responsivos y soporte para temas oscuros.
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.