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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
<div class="max-w-lg w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-md bg-opacity-50 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Heat Map Visualization</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">Analyze your data trends with our intuitive heat maps.
Explore insights in a visually appealing format using earth tones inspired by nature.</p>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<h3 class="font-medium text-gray-700 dark:text-gray-100">Region A</h3>
<img src="https://picsum.photos/200/150?random=1" alt="Heat Map Region A" class="w-full h-auto rounded-lg">
</div>
<div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<h3 class="font-medium text-gray-700 dark:text-gray-100">Region B</h3>
<img src="https://picsum.photos/200/150?random=2" alt="Heat Map Region B" class="w-full h-auto rounded-lg">
</div>
<div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<h3 class="font-medium text-gray-700 dark:text-gray-100">Region C</h3>
<img src="https://picsum.photos/200/150?random=3" alt="Heat Map Region C" class="w-full h-auto rounded-lg">
</div>
<div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
<h3 class="font-medium text-gray-700 dark:text-gray-100">Region D</h3>
<img src="https://picsum.photos/200/150?random=4" alt="Heat Map Region D" class="w-full h-auto rounded-lg">
</div>
</div>
</div>
<footer class="mt-8 text-gray-600 dark:text-gray-300">
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</div>Componentes relacionados
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 de comercio electrónico de mapa de calor
Un componente minimalista de mapa de calor en escala de grises para comercio electrónico, con un diseño complejo e interactivo. Responsivo y admite el modo oscuro.
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.