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
Composant Cartes thermiques
Un composant de cartes thermiques réactif avec une esthétique rétro/vintage, conçu à des fins de blog/contenu, avec des éléments interactifs et la prise en charge du thème sombre.
Composant de carte thermique neumorphe
Un composant de carte thermique réactif et neumorphe avec une palette de couleurs triadique, conçu pour les sites Web d’entreprise et d’entreprise. Dispose d’ombres douces et d’une prise en charge du mode sombre, affichant visuellement l’intensité des données.
Composant Cartes thermiques
Un composant de cartes thermiques réactif avec prise en charge du thème sombre, construit avec Tailwind CSS. Il présente une mise en page simple avec un minimum d’éléments, adaptée à un blog ou à la consommation de contenu.