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
Un componente per mappe termiche reattivo per applicazioni manifatturiere/industriali, caratterizzato da un design ispirato alla carta/stampa e una combinazione di colori oceano/blu. Include il supporto per la modalità oscura e l'HTML semantico.
Componente Mappe di calore
Un componente per mappe di calore reattivo per un portafoglio, progettato con uno sfondo scuro e colori vivaci e ad alta saturazione per ridurre l'affaticamento degli occhi e creare energia. Include una griglia simile a un calendario per visualizzare l'attività, suggerimenti interattivi (anche se la funzionalità non è implementata secondo la regola "no JavaScript", è presente un segnaposto visivo) e una legenda dei colori.
Componente Mappe di calore
Un componente per mappe di calore dal design minimalista e piatto con colori tenui, adatto per siti Web di giochi. Dispone di una griglia di visualizzazione dei livelli di attività, reattivo su tutti i dispositivi e supporta la modalità oscura.