Componente Mappe di calore
Un componente Heat Map 3D reattivo con colori complementari, adatto per blog e consumo di contenuti, con supporto per la modalità scura.
Codice HTML
<div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Monthly Activity Heatmap</h2>
<div class="grid grid-cols-7 gap-1 ">
<!-- Days of the week -->
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sun</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Mon</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Tue</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Wed</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Thu</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Fri</div>
<div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sat</div>
<!-- Heatmap cells (example for 4 weeks) -->
{[...Array(28)].map((_, i) => (
`<div key={i} class="relative w-8 h-8 md:w-10 md:h-10 transform perspective-1000 -rotate-x-15 rotate-y-15 p-1">
<div class="absolute inset-0 rounded-md shadow-lg transition-all duration-300 transform
${i % 7 === 0 ? "bg-red-500 dark:bg-red-700" : ""}
${i % 7 === 1 ? "bg-red-600 dark:bg-red-800" : ""}
${i % 7 === 2 ? "bg-orange-500 dark:bg-orange-700" : ""}
${i % 7 === 3 ? "bg-orange-600 dark:bg-orange-800" : ""}
${i % 7 === 4 ? "bg-red-700 dark:bg-red-900" : ""}
${i % 7 === 5 ? "bg-red-800 dark:bg-red-950" : ""}
${i % 7 === 6 ? "bg-orange-700 dark:bg-orange-900" : ""}
hover:scale-110 hover:rotate-x-0 hover:rotate-y-0
group-hover:opacity-75
flex items-center justify-center
text-white text-xs font-bold
">
${i + 1}
</div>
</div>`
)).join("")}
</div>
<div class="mt-4 flex justify-between text-gray-600 dark:text-gray-400">
<span>Less</span>
<div class="flex space-x-1">
<div class="w-4 h-4 bg-red-400 dark:bg-red-600 rounded"></div>
<div class="w-4 h-4 bg-red-500 dark:bg-red-700 rounded"></div>
<div class="w-4 h-4 bg-red-600 dark:bg-red-800 rounded"></div>
<div class="w-4 h-4 bg-red-700 dark:bg-red-900 rounded"></div>
<div class="w-4 h-4 bg-red-800 dark:bg-red-950 rounded"></div>
</div>
<span>More</span>
</div>
</div>
Componenti correlati
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.
Neumorfismo Vibrante Heat Maps Componente
Un componente di mappe di calore reattivo con design a neumorfismo, che utilizza una combinazione di colori vivaci e una complessità moderata. Include il supporto per la modalità oscura e gli effetti al passaggio del mouse. Costruito con semplici classi HTML e Tailwind CSS, integrato con un piccolo blocco CSS per ombre di neumorfismo personalizzate e livelli di colore.
Componente Mappe di calore
Un componente heatmap con design minimalista, layout reattivo e supporto per temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript. Utilizza i CSS per lo stile della modalità scura.