Componente Mappe di calore
Un componente di mappa di calore reattivo con un'estetica industriale verde foresta per le interfacce dei social media, che supporta le modalità chiara e scura.
Codice HTML
<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>Componenti correlati
Componente Mappe di calore
Un componente reattivo per le mappe termiche in modalità scura per la visualizzazione dei dati su una dashboard, utilizzando una combinazione di colori triadica.
Componente Mappe di calore
Un componente Heat Maps progettato con uno stile brutalista con contrasto elevato e layout insoliti utilizzando Tailwind CSS. Supporta effetti reattivi e un tema scuro.
Componente e-commerce Heat Map
Un componente minimalista della mappa di calore in scala di grigi per l'e-commerce, caratterizzato da un design complesso e interattivo. Reattivo e supporta la modalità oscura.