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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
<h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
<div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
<ul class="mt-2 space-y-2">
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
</li>
</ul>
</div>
</div>
</div>
<p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>Componentes relacionados
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.
Componente Mapas de calor
Un componente de mapas de calor responsivo con soporte para temas oscuros, construido con Tailwind CSS. Presenta un diseño simple con elementos mínimos, adecuado para un blog o consumo de contenido.
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.