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 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.
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.
Componente Mapas de calor
Un componente de mapa de calor responsivo para redes sociales con diseño de Skeuomorphism, colores complementarios y compatibilidad con el modo oscuro mediante Tailwind CSS.