Componente Mappe di calore
Un componente Heat Maps progettato in stile Brutalismo con toni della Terra, complessità moderata e design reattivo con supporto per temi scuri.
Codice 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>Componenti correlati
Componente Mappe di calore
Un componente di mappe di calore reattivo con Tailwind CSS, con microinterazioni e supporto per temi scuri, utilizzando immagini segnaposto e avatar.
Componente Mappe di calore
Un semplice componente di mappe termiche reattive con uno stile di progettazione 3D e una combinazione di colori complementari, progettato per mostrare lavori o prodotti con supporto per temi scuri.
Componente Mappe di calore
Un semplice componente per mappe di calore reattivo progettato con un'estetica retrò/vintage utilizzando una combinazione di colori pastello, adatto per cruscotti. È dotato di supporto per il tema scuro con Tailwind CSS.