Heatmaps-Komponente
Eine von Entwicklern inspirierte Monospace-Heatmap-Komponente mit Erdtönen, die für Beratung/Dienstleistungen entwickelt wurde. Verfügt über ein gitterartiges Display, das Heatmap-Daten für verschiedene Tage simuliert, auf allen Geräten reaktionsfähig ist und den Dunkelmodus unterstützt.
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>Verwandte Komponenten
Heatmaps-Komponente
Heatmaps-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.
Heatmaps-Komponente
Eine Heatmap-Komponente mit minimalistischem Design, responsivem Layout und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten. Verwendet CSS für das Styling im Dunkelmodus.
Heatmaps-Komponente
Eine reaktionsschnelle Heatmaps-Komponente, die mit Glasmorphismus und einem analogen Farbschema für Social-Media-Schnittstellen entwickelt wurde.