Composant Cartes thermiques
Composant de carte thermique propre, inspiré du code, avec des tons sépia/bruns pour les actualités/le journalisme. Affiche les niveaux d’activité quotidienne avec des polices monospace et une esthétique terminale, avec prise en charge du mode sombre et réactivité totale.
HTML Code
<div class="font-['Roboto_Mono'] bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-4xl mx-auto sm:my-8 border border-stone-200 dark:border-stone-800">
<h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-amber-900 dark:text-amber-500 text-center uppercase tracking-wide">
Activity Log <span class="text-stone-600 dark:text-stone-400 text-sm">(Past 365 Days)</span>
</h2>
<div class="overflow-x-auto pb-2 -mr-4 sm:-mr-6 lg:-mr-8 pr-4 sm:pr-6 lg:pr-8">
<div class="flex flex-col flex-nowrap w-max min-w-full">
<!-- Months Header -->
<div class="flex text-xs text-stone-600 dark:text-stone-400 mb-2 whitespace-nowrap">
<div class="w-4 sm:w-5 mr-1"></div> <!-- Placeholder for days label -->
<div class="flex-grow grid grid-flow-col auto-cols-[minmax(1rem,1fr)] sm:auto-cols-[minmax(1.25rem,1fr)] lg:auto-cols-[minmax(1.5rem,1fr)] gap-0.5">
<div class="flex-none w-16 text-center">Jan</div>
<div class="flex-none w-16 text-center">Feb</div>
<div class="flex-none w-16 text-center">Mar</div>
<div class="flex-none w-16 text-center">Apr</div>
<div class="flex-none w-16 text-center">May</div>
<div class="flex-none w-16 text-center">Jun</div>
<div class="flex-none w-16 text-center">Jul</div>
<div class="flex-none w-16 text-center">Aug</div>
<div class="flex-none w-16 text-center">Sep</div>
<div class="flex-none w-16 text-center">Oct</div>
<div class="flex-none w-16 text-center">Nov</div>
<div class="flex-none w-16 text-center">Dec</div>
</div>
</div>
<div class="flex flex-row flex-nowrap">
<!-- Day Labels (Vertical) -->
<div class="flex flex-col text-xs text-stone-600 dark:text-stone-400 mr-1 whitespace-nowrap min-w-[20px]">
<div class="h-4 sm:h-5 text-right">Mon</div>
<div class="h-4 sm:h-5 text-right"></div>
<div class="h-4 sm:h-5 text-right">Wed</div>
<div class="h-4 sm:h-5 text-right"></div>
<div class="h-4 sm:h-5 text-right">Fri</div>
<div class="h-4 sm:h-5 text-right"></div>
<div class="h-4 sm:h-5 text-right">Sun</div>
</div>
<!-- Heatmap Grid -->
<div class="grid grid-flow-col auto-cols-[minmax(1rem,1fr)] sm:auto-cols-[minmax(1.25rem,1fr)] lg:auto-cols-[minmax(1.5rem,1fr)] grid-rows-7 gap-0.5 border border-stone-300 dark:border-stone-700 bg-stone-200 dark:bg-stone-800 p-0.5 rounded-sm overflow-hidden">
<!-- Example squares - 52 weeks (approx 365 days) * 7 days/week -->
<!-- Dynamically generated for demonstration of variety -->
<!-- Week 1 -->
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 1: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 2: 1 contribution"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm" title="Jan 3: 5 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm" title="Jan 4: 10 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm" title="Jan 5: 15 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm" title="Jan 6: 20 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm" title="Jan 7: 25+ contributions"></div>
<!-- Week 2 -->
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 8: 1 contribution"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm" title="Jan 9: 5 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 10: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm" title="Jan 11: 10 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm" title="Jan 12: 15 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 13: 1 contribution"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 14: 0 contributions"></div>
<!-- Week 3 -->
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm" title="Jan 15: 20 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm" title="Jan 16: 25+ contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm" title="Jan 17: 15 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 18: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 19: 1 contribution"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm" title="Jan 20: 5 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm" title="Jan 21: 10 contributions"></div>
<!-- Week 4 -->
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 22: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 23: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 24: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 25: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 26: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 27: 0 contributions"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 28: 0 contributions"></div>
<!-- ... Repeat for 52 weeks or ~365 days ... -->
<!-- This is a placeholder for brevity. In a real application, this would be data-driven. -->
<!-- Total of 365 days / 7 days/column = approx 52 columns. -->
<!-- Filling remaining weeks with varied data for visual fidelity -->
<!-- Weeks 5-52 with varied activity -->
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
<div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
<!-- Continue adding 7*52 squares for a full year -->
<!-- ... approximately 365 squares in total ... -->
<!-- For a full year you would need 52-53 columns of 7 elements -->
<!-- Just showing enough for a decent visual example -->
<!-- End of placeholder squares -->
</div>
</div>
</div>
</div>
<div class="flex justify-end items-center text-xs mt-4 sm:mt-6 text-stone-600 dark:text-stone-400 space-x-2">
<span class="uppercase">Less</span>
<div class="flex space-x-0.5">
<div class="h-3 w-3 bg-amber-100 dark:bg-stone-700 rounded-[2px]"></div>
<div class="h-3 w-3 bg-amber-300 dark:bg-stone-500 rounded-[2px]"></div>
<div class="h-3 w-3 bg-amber-500 dark:bg-stone-300 rounded-[2px]"></div>
<div class="h-3 w-3 bg-amber-700 dark:bg-stone-100 rounded-[2px]"></div>
</div>
<span class="uppercase">More</span>
</div>
</div>Composants associés
Composant Cartes thermiques
Un composant de carte thermique simple et réactif pour les sites Web agricoles, avec une palette de couleurs rétro/vintage et une prise en charge du mode sombre, conçu pour les micro-interactions.
Composant de commerce électronique de la carte thermique
Un composant de carte thermique minimaliste en niveaux de gris pour le commerce électronique, doté d’un design complexe et interactif. Réactif et prend en charge le mode sombre.
Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.