Heat Maps Component
A responsive heat map component with an industrial, forest green aesthetic for social media interfaces, supporting light and dark modes.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-sans text-stone-800 dark:text-stone-200">
<div class="max-w-5xl mx-auto bg-stone-50 dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
<!-- Header Section -->
<div class="p-4 sm:p-6 bg-emerald-700 dark:bg-emerald-900 text-stone-50 flex items-center justify-between">
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Activity Heat Map</h2>
<div class="flex items-center space-x-2">
<button class="p-2 rounded-full hover:bg-emerald-600 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</button>
<button class="p-2 rounded-full hover:bg-emerald-600 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
<div class="p-4 sm:p-6">
<!-- Filters/Navigation -->
<nav class="mb-6 flex flex-wrap items-center justify-between text-sm sm:text-base font-medium border-b border-stone-300 dark:border-stone-700 pb-3">
<ul class="flex flex-wrap gap-x-4 gap-y-2 sm:gap-x-6">
<li><a href="#" class="text-emerald-700 dark:text-emerald-400 border-b-2 border-emerald-700 dark:border-emerald-400 pb-1">Daily</a></li>
<li><a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400">Weekly</a></li>
<li><a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400">Monthly</a></li>
<li><a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400">Yearly</a></li>
</ul>
<div class="flex items-center gap-2 mt-2 sm:mt-0">
<label for="period-select" class="sr-only">Select Period</label>
<select id="period-select" class="p-2 rounded-md bg-stone-200 dark:bg-stone-700 border border-stone-300 dark:border-stone-600 text-stone-800 dark:text-stone-200 focus:ring-emerald-500 focus:border-emerald-500">
<option>Last 30 Days</option>
<option>Last 90 Days</option>
<option>Last Year</option>
</select>
<button class="p-2 rounded-md bg-stone-200 dark:bg-stone-700 hover:bg-stone-300 dark:hover:bg-stone-600 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-600 dark:text-stone-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</button>
</div>
</nav>
<!-- Heat Map Grid -->
<div class="overflow-x-auto pb-4">
<div class="grid grid-flow-col gap-1 auto-cols-min min-w-full" style="grid-template-rows: repeat(7, minmax(0, 1fr));">
<!-- Days of Week Labels -->
<div class="sticky left-0 bg-stone-50 dark:bg-stone-800 z-10 pr-2 border-r border-stone-200 dark:border-stone-700 flex flex-col justify-around text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400">
<div class="h-5 flex items-center justify-end">Mon</div>
<div class="h-5 flex items-center justify-end">Tue</div>
<div class="h-5 flex items-center justify-end">Wed</div>
<div class="h-5 flex items-center justify-end">Thu</div>
<div class="h-5 flex items-center justify-end">Fri</div>
<div class="h-5 flex items-center justify-end">Sat</div>
<div class="h-5 flex items-center justify-end">Sun</div>
</div>
<!-- Main Heat Map Cells -->
<div class="col-span-full grid grid-flow-col gap-1 auto-cols-min" style="grid-template-rows: repeat(7, minmax(0, 1fr));">
<!-- Month Label Row -->
<div class="col-span-full flex gap-1 mb-1" style="grid-row: 1;">
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Jan</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Feb</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Mar</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Apr</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">May</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Jun</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Jul</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Aug</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Sep</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Oct</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Nov</div>
<div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Dec</div>
</div>
<!-- Example Cells (dynamic data would populate these) -->
<!-- A simple loop to generate some placeholder cells to demonstrate the layout. -->
<!-- In a real application, you would generate these based on actual data with varying levels. -->
<!-- Each div represents a day. The `data-tooltip` would be added by JS for interactivity. -->
<!-- Using inline style `width` for consistent cell sizing in this grid approach relative to `grid-template-rows`. -->
<!-- Using custom properties for width for better maintainability if dynamically generated. -->
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Jan 1: 0 contributions"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer mt-auto" title="Feb 2: 7 contributions"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Mar 3: 15 contributions"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Apr 4: 25 contributions"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="May 5: 2 contributions"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Jun 6: 8 contributions"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Jul 7: 18 contributions"></div>
<!-- More example cells -->
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<!-- Repeat for ~52 columns to simulate a year, varying the background color for visual heat -->
<!-- Example of dynamic generation logic (would be in JS/backend): -->
<!-- for (let i = 0; i < 365; i++) { -->
<!-- const intensity = Math.floor(Math.random() * 5); // 0-4 -->
<!-- const colors = ['bg-emerald-100 dark:bg-emerald-950', 'bg-emerald-300 dark:bg-emerald-800', 'bg-emerald-500 dark:bg-emerald-600', 'bg-emerald-700 dark:bg-emerald-400', 'bg-emerald-900 dark:bg-emerald-200']; -->
<!-- <div class="w-6 h-5 rounded-sm ${colors[intensity]} hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div> -->
<!-- } -->
<!-- Placeholder for about 52 columns -->
<!-- This block would be repeated for each column (week) -->
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<!-- Repeat this for around 52 weeks (columns) or 365 days (cells) for full year -->
<!-- Start of additional columns to simulate a full year of data -->
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<!-- Continue adding more columns as needed for a full year -->
<!-- Example of a few more weeks to fill space -->
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
<!-- End of additional cells -->
</div>
</div>
</div>
<!-- Legend & Summary -->
<div class="mt-6 flex flex-wrap justify-between items-center text-sm">
<div class="flex items-center gap-2">
<span class="text-stone-600 dark:text-stone-400">Less</span>
<div class="flex gap-1">
<div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-950"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-800"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-600"></div>
<div class="w-4 h-4 rounded-sm bg-emerald- green-700 dark:bg-emerald-400"></div>
<div class="w-4 h-4 rounded-sm bg-emerald-900 dark:bg-emerald-200"></div>
</div>
<span class="text-stone-600 dark:text-stone-400">More</span>
</div>
<div class="flex items-center mt-4 sm:mt-0">
<span class="text-stone-600 dark:text-stone-400 mr-2">Total Contributions:</span>
<strong class="text-lg font-semibold text-emerald- green-700 dark:text-emerald-400">1,234</strong>
</div>
</div>
<!-- User Profile (Optional, for context in social media) -->
<div class="mt-6 pt-6 border-t border-stone-200 dark:border-stone-700 flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-emerald-500 dark:border-emerald-400">
<div>
<p class="font-semibold text-stone-800 dark:text-stone-200">Jane Doe</p>
<p class="text-sm text-stone-600 dark:text-stone-400">@janedoe ยท Joined Oct 2023</p>
</div>
</div>
</div>
</div>
</div>Related Components
Heat Maps Component
Clean, code-inspired heat map component with sepia/brown tones for news/journalism. Displays daily activity levels with monospace fonts and terminal aesthetics, featuring dark mode support and full responsiveness.
Heat Maps Component
A Heat Maps Component designed in a Brutalism style with Earth tones, moderate complexity, and responsive design with dark theme support.