Heatmaps-Komponente
Saubere, vom Code inspirierte Heatmap-Komponente mit Sepia-/Brauntönen für Nachrichten/Journalismus. Zeigt das tägliche Aktivitätsniveau mit Monospace-Schriftarten und Terminal-Ästhetik an, mit Unterstützung für den Dunkelmodus und voller Reaktionsfähigkeit.
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>Verwandte Komponenten
Luxury_Premium_Heatmap_Component
Eine elegante und ausgeklügelte Heatmap-Komponente in triadischen Farben, die für Nachrichten- und Journalismus-Websites entwickelt wurde und die Popularität oder das Engagement von Artikeln zeigt. Es zeichnet sich durch eine verfeinerte Typografie, subtile Farbverläufe und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus aus.
Neumorphe Heatmap-Komponente
Eine reaktionsschnelle, neumorphe Heatmap-Komponente mit einem triadischen Farbschema, die für Geschäfts- und Unternehmenswebsites entwickelt wurde. Verfügt über Unterstützung für weiche Schatten und den Dunkelmodus, wodurch die Datenintensität visuell angezeigt wird.
Heatmaps-Komponente
Eine reaktionsschnelle Heatmaps-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Es verfügt über ein einfaches Layout mit minimalen Elementen, das sich für einen Blog oder den Konsum von Inhalten eignet.