Componente Mapas de calor
Un componente de mapas de calor diseñado en un estilo brutalista con tonos tierra, complejidad moderada y diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
<p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
<img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
<h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
<p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
</div>
<div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
<img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
<h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
<p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
</div>
<div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
<img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
<h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
<p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
</div>
</div>
<div class="mt-6">
<h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
<div class="flex space-x-4 mt-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
</div>
</div>
</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 42
Un componente de mapa de calor responsivo diseñado con estilo Neumorphism usando Tailwind CSS, compatible con el modo oscuro y con imágenes y avatares aleatorios.
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.