Heat Maps 구성 요소
뉴스/저널리즘을 위한 세피아/브라운 톤의 깨끗하고 코드에서 영감을 받은 히트 맵 구성 요소. 고정 폭 글꼴과 터미널 미학으로 일일 활동 수준을 표시하며 다크 모드 지원 및 완전한 응답성을 제공합니다.
HTML 코드
<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>관련 구성 요소
Heat Map E-commerce 구성 요소
전자 상거래를 위한 미니멀한 그레이스케일 히트 맵 구성 요소로, 복잡한 인터랙티브 디자인이 특징입니다. 반응형이며 다크 모드를 지원합니다.
Heat Maps 구성 요소
글래스모피즘 효과로 디자인된 반응형 히트 맵 구성 요소로, 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 활용하는 어두운 테마 스타일을 지원합니다.
Heat Maps 구성 요소
뉴스 및 저널리즘 웹사이트를 위한 재미있고 재미있는 히트 맵 구성 요소로, 기업용 파란색 색 구성표를 사용하여 둥근 요소와 친근한 미학이 있는 밝고 쾌활한 디자인이 특징입니다. 응답성 및 다크 모드 지원이 포함됩니다.