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.
Codice HTML
<div class="bg-white dark:bg-gray-900 p-4 shadow-md rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Product Activity Heat Map</h2>
<div class="grid grid-cols-31 gap-1">
<!-- Days of the week column -->
<div class="col-span-1 flex flex-col justify-around">
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Mon</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Tue</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Wed</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Thu</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Fri</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sat</div>
<div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sun</div>
</div>
<!-- Heat map grid -->
<div class="col-span-30 grid grid-cols-30 gap-1">
<!-- Placeholder for days of the month (simplified) -->
<div class="col-span-30 grid grid-cols-30 gap-1">
<!-- Example cells with varying intensity -->
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
<div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
<div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
<div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
<div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
<div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
<!-- ... add more cells for the rest of the month ... -->
</div>
</div>
</div>
</div>
Componenti correlati
Mappe di calore Componente 42
Un componente di mappa di calore reattivo progettato con lo stile Neumorphism utilizzando Tailwind CSS, che supporta la modalità oscura e presenta immagini e avatar casuali.
Componente Mappe di calore
Un componente Heat Maps per il consumo di blog/contenuti, caratterizzato da un design reattivo con supporto per la modalità scura. Utilizza una combinazione di colori in scala di grigi e una complessità media con funzionalità interattive. Niente JavaScript, HTML puro con Tailwind CSS.
Componente Mappe di calore
Un componente di mappe termiche reattivo con stile per la modalità oscura utilizzando Tailwind CSS, con immagini segnaposto casuali e avatar utente.