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 mapa de calor con diseño minimalista, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. No se incluye JavaScript. Utiliza CSS para el estilo del modo oscuro.
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.
Componente de mapas de calor vibrantes de neumorfismo
Un componente de mapas de calor receptivo con diseño de neumorfismo, que utiliza un esquema de colores vibrantes y una complejidad moderada. Incluye soporte para modo oscuro y efectos de desplazamiento. Construido con HTML simple y clases CSS de Tailwind, complementado con un pequeño bloque CSS para sombras y niveles de color de Neumorphism personalizados.