Composant Cartes thermiques
Un composant de carte thermique monospace, inspiré des développeurs, avec des tons de terre, conçu pour le conseil/les services. Dispose d’un affichage de type grille simulant les données de la carte thermique pour différents jours, réactif sur tous les appareils et prenant en charge le mode sombre.
HTML Code
<div class="font-mono bg-stone-100 text-stone-800 py-12 px-4 sm:px-6 lg:px-8 dark:bg-stone-900 dark:text-stone-300">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-4 dark:text-stone-100">
<span class="text-emerald-600 dark:text-emerald-400">//</span> Activity Overview
</h2>
<p class="text-center text-lg mb-10 text-stone-600 dark:text-stone-400">
Review your contributions and activity patterns.
</p>
<div class="bg-white border border-stone-200 rounded-lg shadow-lg overflow-hidden dark:bg-stone-800 dark:border-stone-700">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<div class="flex space-x-2 text-sm text-stone-500 dark:text-stone-400">
<span>2023</span>
<span class="text-emerald-600 dark:text-emerald-400">//</span>
<span>Activity</span>
</div>
<div class="flex items-center space-x-2 text-sm">
<div class="w-3 h-3 bg-stone-200 dark:bg-stone-700 rounded-sm" title="No activity"></div>
<div class="w-3 h-3 bg-emerald-100 dark:bg-emerald-800 rounded-sm" title="Low activity"></div>
<div class="w-3 h-3 bg-emerald-300 dark:bg-emerald-600 rounded-sm" title="Moderate activity"></div>
<div class="w-3 h-3 bg-emerald-500 dark:bg-emerald-400 rounded-sm" title="High activity"></div>
<div class="w-3 h-3 bg-emerald-700 dark:bg-emerald-300 rounded-sm" title="Very High activity"></div>
<span class="ml-2 text-stone-600 dark:text-stone-400">Less</span>
<span class="text-stone-600 dark:text-stone-400">More</span>
</div>
</div>
<div class="grid gap-1 grid-flow-col auto-cols-max overflow-x-auto pb-4 custom-scrollbar">
<!-- Days of Week Labels (Hidden on small, visible on larger) -->
<div class="hidden md:flex flex-col justify-start text-xs text-stone-500 dark:text-stone-400 pt-2">
<div class="h-4 leading-4 mb-1"></div>
<div class="h-4 leading-4 mb-1">Mon</div>
<div class="h-4 leading-4 mb-1"></div>
<div class="h-4 leading-4 mb-1">Wed</div>
<div class="h-4 leading-4 mb-1"></div>
<div class="h-4 leading-4 mb-1">Fri</div>
<div class="h-4 leading-4 mb-1"></div>
</div>
<!-- Month Row -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jan</div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 1: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 2: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 3: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 4: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 5: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 6: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 7: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 8: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 9: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 10: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 11: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 12: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 13: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 14: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 15: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 16: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 17: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 18: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 19: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 20: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 21: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 22: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 23: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 24: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 25: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 26: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 27: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 28: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 29: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 30: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 31: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 1: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 2: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 3: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 4: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 5: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 6: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 7: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 8: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 9: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 10: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 11: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 12: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 13: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 14: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 15: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 16: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 17: No activity"></div>
</div>
<!-- Continue with more month columns as needed to fill 12 months -->
<!-- Example: March -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 18: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 19: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 20: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 21: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 22: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 23: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 24: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 25: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 26: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 27: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 28: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 1: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Mar</div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 2: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 3: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 4: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 5: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 6: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 7: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 8: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 9: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 10: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 11: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 12: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 13: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 14: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 15: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 16: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 17: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 18: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 19: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 20: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 21: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 22: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 23: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 24: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 25: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 26: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 27: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 28: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 29: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 30: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 31: No activity"></div>
</div>
<!-- End example months -->
<!-- Placeholder to continue the pattern for more months (e.g., April, May, etc.) -->
<!-- Copy and paste a 'grid grid-rows-7' block for each additional month, updating 'col-span-1 text-xs' for the month label -->
<!-- Also update the `title` attribute for each square to reflect the correct date and activity level -->
<!-- APR -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Apr</div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 1: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 2: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 3: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 4: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 5: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 6: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 7: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 8: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 9: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 10: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 11: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 12: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 13: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 14: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 15: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 16: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 17: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 18: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 19: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 20: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 21: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 22: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 23: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 24: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 25: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 26: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 27: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 28: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 29: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 30: No activity"></div>
</div>
<!-- MAY -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">May</div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 1: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 2: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 3: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 4: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 5: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 6: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 7: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 8: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 9: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 10: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 11: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 12: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 13: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 14: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 15: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 16: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 17: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 18: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 19: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 20: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 21: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 22: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 23: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 24: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 25: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 26: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 27: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 28: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 29: High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 30: No activity"></div>
</div>
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 31: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 1: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="June 2: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="June 3: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="June 4: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 5: High"></div>
</div>
<!-- JUN -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jun</div>
<div class="w-4 h-4 rounded-sm bg-emerald-light dark:bg-emerald-darker-3" title="June 6: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="June 7: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 8: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="June 9: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="June 10: No activity"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="June 11: Low"></div>
</div>
<!-- JUL -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jul</div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="July 1: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="July 2: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="July 3: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="July 4: No activity"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="July 5: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="July 6: Moderate"></div>
</div>
<!-- AUG -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Aug</div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Aug 1: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Aug 2: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Aug 3: No activity"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Aug 4: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Aug 5: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Aug 6: High"></div>
</div>
<!-- SEP -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Sep</div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Sep 1: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Sep 2: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Sep 3: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Sep 4: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Sep 5: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Sep 6: No activity"></div>
</div>
<!-- OCT -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Oct</div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Oct 1: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Oct 2: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Oct 3: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Oct 4: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Oct 5: No activity"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Oct 6: Low"></div>
</div>
<!-- NOV -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Nov</div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Nov 1: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Nov 2: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Nov 3: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Nov 4: No activity"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Nov 5: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Nov 6: Moderate"></div>
</div>
<!-- DEC -->
<div class="grid grid-rows-7 gap-1 pt-2">
<div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Dec</div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Dec 1: High"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Dec 2: Very High"></div>
<div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Dec 3: No activity"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Dec 4: Low"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Dec 5: Moderate"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Dec 6: High"></div>
</div>
</div>
</div>
<div class="p-6 border-t border-stone-200 dark:border-stone-700 text-sm text-stone-500 flex justify-between items-center dark:text-stone-400">
<p>
<span class="text-emerald-600 dark:text-emerald-400">//</span> Last updated: Today
</p>
<p>
<a href="#" class="text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300">View detailed logs</a>
</p>
</div>
</div>
</div>
<style>
/* Custom scrollbar for better aesthetics, especially in dark mode */
.custom-scrollbar::-webkit-scrollbar {
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: theme('colors.stone.300');
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: theme('colors.stone.700');
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: theme('colors.emerald.500');
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: theme('colors.emerald.400');
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: theme('colors.emerald.600');
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: theme('colors.emerald.300');
}
/* Ensure rows line up */
.grid-rows-7 > div:first-child {
grid-row: 1 / span 1;
}
</style>
</div>Composants associés
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.
Composant Cartes thermiques
Un composant de carte thermique minimaliste et plat pour les tableaux de bord, avec une palette de couleurs complémentaires, une mise en page réactive et la prise en charge du mode sombre. Affiche les niveaux d’activité au fil du temps.
Composant Cartes thermiques
Un composant de cartes thermiques réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec des images de remplacement aléatoires et des avatars d’utilisateurs.