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 responsivo diseñado con morfismo de vidrio y un esquema de color análogo para interfaces de redes sociales.
Componente de mapa de calor neumórfico
Un componente de mapa de calor neumórfico receptivo con un esquema de color triádico, diseñado para sitios web comerciales y corporativos. Cuenta con sombras suaves y compatibilidad con el modo oscuro, mostrando visualmente la intensidad de los datos.
Componente Mapas de calor
Un componente de mapas de calor responsivo diseñado con una estética retro/vintage, que incorpora soporte para temas oscuros. Cuenta con secciones para un título, un subtítulo y un mapa con áreas resaltadas con calor, con imágenes aleatorias adicionales y avatares para una apariencia nostálgica.