Componente Mappe di calore
Un componente reattivo per le mappe termiche in modalità scura per la visualizzazione dei dati su una dashboard, utilizzando una combinazione di colori triadica.
Codice HTML
<div class="bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Heat Maps Component</h2>
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-blue-700">
<h3 class="text-lg font-semibold text-white">Category 1</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded mt-2" />
<p class="text-white mt-2">Heat Level: High</p>
</div>
<div class="bg-orange-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-orange-700">
<h3 class="text-lg font-semibold text-white">Category 2</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="rounded mt-2" />
<p class="text-white mt-2">Heat Level: Medium</p>
</div>
<div class="bg-green-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-green-700">
<h3 class="text-lg font-semibold text-white">Category 3</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="rounded mt-2" />
<p class="text-white mt-2">Heat Level: Low</p>
</div>
</div>
<footer class="mt-6 text-center">
<p class="text-gray-400">Data visualizations based on real-time data</p>
<div class="flex justify-center mt-4 space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
</div>
</footer>
</div>Componenti correlati
Componente Mappe di calore
Componente Heat Maps con effetti reattivi e supporto per temi scuri.
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 componente reattivo per le mappe di calore con supporto per il tema scuro, costruito con Tailwind CSS. Presenta un layout semplice con elementi minimi, adatto per un blog o per il consumo di contenuti.