Composant Cartes thermiques
Un composant de carte thermique 3D réactif avec des couleurs complémentaires, adapté à la consommation de blogs et de contenus, avec prise en charge du mode sombre.
HTML Code
<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>
Composants associés
Luxury_Premium_Heatmap_Component
Un composant de carte thermique triadique élégant et sophistiqué conçu pour les sites Web d’actualités et de journalisme, mettant en valeur la popularité ou l’engagement des articles. Il présente une typographie raffinée, des dégradés subtils et une réactivité totale avec la prise en charge du mode sombre.
Composant Cartes thermiques
Un composant de carte thermique réactif conçu avec des effets de glassmorphism, avec des éléments translucides semblables à du verre dépoli et la prise en charge du style de thème sombre, à l’aide de Tailwind CSS.
Composant Cartes thermiques
Un composant de cartes thermiques conçu dans le style du glassmorphism, avec des tons de terre. La mise en page est simple, composée d’éléments de base destinés à une utilisation professionnelle/d’entreprise, et prend en charge le mode sombre.