Componente Mappe di calore
Un componente reattivo per le mappe di calore progettato con un'estetica retrò/vintage, che incorpora il supporto per i temi scuri. Presenta sezioni per un titolo, un sottotitolo e una mappa con aree evidenziate termicamente, con immagini casuali e avatar aggiuntivi per un look nostalgico.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
<h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
<div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
<ul class="mt-2 space-y-2">
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
</li>
</ul>
</div>
</div>
</div>
<p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>Componenti correlati
Componente e-commerce Heat Map
Un componente minimalista della mappa di calore in scala di grigi per l'e-commerce, caratterizzato da un design complesso e interattivo. Reattivo e supporta la modalità oscura.
Componente Mappe di calore
Un componente Heat Maps progettato con lo stile glassmorphism, con toni della terra. Il layout è semplice, composto da elementi di base destinati all'uso aziendale/aziendale e supporta la modalità oscura.
Componente Mappe di calore
Un componente minimalista per le mappe di calore che mostra un portfolio con funzionalità interattive, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.