Search Components

Heat Maps

Graphical representation of data using color intensity

Heat Maps Component

A responsive heat map component for manufacturing/industrial applications, featuring a paper/print-inspired design and an ocean/blue color scheme. Includes dark mode support and semantic HTML.

Open Preview

                <div class="font-sans bg-slate-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <!-- Header Section -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-blue-700 to-sky-500 dark:from-blue-900 dark:to-sky-700 text-white border-b-4 border-sky-400 dark:border-sky-500">
      <h2 class="text-3xl sm:text-4xl font-extrabold mb-2 leading-tight">Production Line Heat Map</h2>
      <p class="text-lg opacity-90">Real-time operational insights for manufacturing efficiency.</p>
    </div>

    <!-- Controls/Filters Section -->
    <div class="p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
      <div class="flex items-center space-x-2">
        <label for="period-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Period:</label>
        <select id="period-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
          <option>Last Hour</option>
          <option selected>Last 24 Hours</option>
          <option>Last 7 Days</option>
          <option>Last 30 Days</option>
        </select>
      </div>

      <div class="flex items-center space-x-2">
        <label for="metric-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Metric:</label>
        <select id="metric-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
          <option selected>Temperature (°C)</option>
          <option>Vibration (Hz)</option>
          <option>Pressure (bar)</option>
          <option>Downtime (min)</option>
        </select>
      </div>

      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold rounded-md shadow-md transition duration-200 ease-in-out text-sm w-full sm:w-auto">
        Refresh Data
      </button>
    </div>

    <!-- Heat Map Grid Area -->
    <div class="p-6 sm:p-8">
      <h3 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Sensor Performance Overview</h3>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
        <!-- Example Heat Map Cells -->
        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
          <div class="p-4 flex flex-col justify-between h-full">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 1</p>
              <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Conveyor Belt 1</h4>
            </div>
            <div class="relative flex-grow flex items-center justify-center">
              <!-- Heat map indicator - Example: Red for high, Blue for low -->
              <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-red-400 via-orange-400 to-yellow-300 dark:from-red-600 dark:via-orange-600 dark:to-yellow-500 opacity-70"></div>
              <span class="relative text-5xl font-extrabold text-white text-shadow-lg">92°C</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-up text-red-500"></i> +5% from avg.</p>
          </div>
          <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
              <div>
                  <p class="font-semibold mb-2">Details:</p>
                  <ul class="text-sm text-left list-disc list-inside space-y-1">
                      <li>Last Spike: 95°C (10:15 AM)</li>
                      <li>Avg. 24h: 87°C</li>
                      <li>Status: <span class="text-yellow-200">Warning</span></li>
                  </ul>
              </div>
          </div>
        </div>

        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
          <div class="p-4 flex flex-col justify-between h-full">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 2</p>
              <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Robotic Arm Extruder</h4>
            </div>
            <div class="relative flex-grow flex items-center justify-center">
              <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-green-400 via-blue-400 to-cyan-300 dark:from-green-600 dark:via-blue-600 dark:to-cyan-500 opacity-70"></div>
              <span class="relative text-5xl font-extrabold text-white text-shadow-lg">78°C</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-down text-green-500"></i> -2% from avg.</p>
          </div>
          <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
              <div>
                  <p class="font-semibold mb-2">Details:</p>
                  <ul class="text-sm text-left list-disc list-inside space-y-1">
                      <li>Last Spike: 79°C (08:30 AM)</li>
                      <li>Avg. 24h: 80°C</li>
                      <li>Status: <span class="text-green-200">Optimal</span></li>
                  </ul>
              </div>
          </div>
        </div>

        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
          <div class="p-4 flex flex-col justify-between h-full">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 3</p>
              <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Curing Oven C-14</h4>
            </div>
            <div class="relative flex-grow flex items-center justify-center">
              <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-yellow-400 via-orange-500 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-700 opacity-70"></div>
              <span class="relative text-5xl font-extrabold text-white text-shadow-lg">185°C</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-exclamation-triangle text-orange-500"></i> +10% from avg.</p>
          </div>
          <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
              <div>
                  <p class="font-semibold mb-2">Details:</p>
                  <ul class="text-sm text-left list-disc list-inside space-y-1">
                      <li>Last Spike: 188°C (09:00 AM)</li>
                      <li>Avg. 24h: 170°C</li>
                      <li>Status: <span class="text-orange-200">Critical</span></li>
                  </ul>
              </div>
          </div>
        </div>

        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
            <div class="p-4 flex flex-col justify-between h-full">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 4</p>
                <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Assembly Line 3</h4>
              </div>
              <div class="relative flex-grow flex items-center justify-center">
                <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-blue-400 via-cyan-400 to-teal-300 dark:from-blue-600 dark:via-cyan-600 dark:to-teal-500 opacity-70"></div>
                <span class="relative text-5xl font-extrabold text-white text-shadow-lg">65°C</span>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-check-circle text-green-500"></i> Stable</p>
            </div>
            <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
                <div>
                    <p class="font-semibold mb-2">Details:</p>
                    <ul class="text-sm text-left list-disc list-inside space-y-1">
                        <li>Last Spike: 66°C (07:00 AM)</li>
                        <li>Avg. 24h: 65°C</li>
                        <li>Status: <span class="text-green-200">Optimal</span></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Add more heat map cells as needed -->

      </div>

      <!-- Example Legend for the Heat Map -->
      <div class="mt-8 flex flex-wrap justify-center gap-4 text-sm">
        <div class="flex items-center">
          <span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600"></span>
          <span class="text-gray-700 dark:text-gray-300">Optimal (< 80°C)</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-400 dark:from-yellow-600 dark:to-orange-600"></span>
          <span class="text-gray-700 dark:text-gray-300">Warning (80-95°C)</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700"></span>
          <span class="text-gray-700 dark:text-gray-300">Critical (> 95°C)</span>
        </div>
      </div>
    </div>

    <!-- Footer Section -->
    <div class="p-4 sm:p-6 text-center text-gray-500 dark:text-gray-400 text-xs bg-gray-50 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700">
      <p>&copy; 2023 Industrial Insights. All rights reserved. Data updated as of <time datetime="2023-10-27T14:30:00Z">Oct 27, 2023, 2:30 PM UTC</time></p>
       <p class="mt-1">Powered by Advanced Sensor Analytics.</p>
    </div>

  </div>

</div>

A responsive heat map component for a portfolio, designed with a dark background and vibrant, high-saturation colors to reduce eye strain and create energy. Includes a calendar-like grid to visualize activity, interactive tooltips (though functionality is not implemented as per `no JavaScript` rule, visual placeholder is present), and a color legend.

Open Preview

                <div class="font-sans antialiased bg-gray-950 text-gray-100 p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-xl shadow-2xl overflow-hidden md:flex dark:bg-gray-900">
    <div class="p-6 sm:p-8 md:p-10 flex-grow">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-cyan-400 mb-2 dark:text-cyan-400">Activity Heatmap</h2>
      <p class="text-gray-400 text-lg sm:text-xl mb-8 dark:text-gray-400">Visualizing my commitment and contributions over time.</p>

      <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
        <div class="flex items-center space-x-4 mb-4 md:mb-0">
          <span class="text-gray-400 text-sm sm:text-base">Last 12 Months</span>
          <div class="relative inline-block text-gray-100">
            <select class="block appearance-none w-full bg-gray-800 border border-gray-700 hover:border-gray-600 px-4 py-2 pr-8 rounded-lg shadow leading-tight focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-600">
              <option>2023</option>
              <option>2022</option>
              <option>2021</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
            </div>
          </div>
        </div>
        <div class="flex space-x-2 text-gray-400 text-sm sm:text-base">
          <span>Less</span>
          <div class="w-4 h-4 rounded-sm bg-gray-700 dark:bg-gray-700"></div>
          <div class="w-4 h-4 rounded-sm bg-purple-900 dark:bg-purple-900"></div>
          <div class="w-4 h-4 rounded-sm bg-purple-700 dark:bg-purple-700"></div>
          <div class="w-4 h-4 rounded-sm bg-fuchsia-600 dark:bg-fuchsia-600"></div>
          <div class="w-4 h-4 rounded-sm bg-pink-500 dark:bg-pink-500"></div>
          <span>More</span>
        </div>
      </div>

      <div class="overflow-x-auto pb-4">
        <div class="grid grid-cols-53 gap-1 min-w-[700px]">
          <!-- Month Labels (approximate placement) -->
          <div class="col-span-2"></div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jan</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Feb</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Mar</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Apr</div>
          <div class="col-span-4 text-center text-xs text-gray-400">May</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jun</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Jul</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Aug</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Sep</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Oct</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Nov</div>
          <div class="col-span-4 text-center text-xs text-gray-400">Dec</div>
          <div class="col-span-1"></div>

          <!-- Days of Week Labels -->
          <div class="text-right text-xs text-gray-400 pr-2">Mon</div>
          <!-- Grid cells (52 weeks for full year + buffer for alignment, 7 days per week) -->
          <!-- Generating 52 weeks * 7 days = 364 cells + 7 day labels -->
          <div class="col-span-52 grid grid-cols-52 gap-1">
            <!-- Placeholder for 52 columns of days -->
            <!-- Example week 1 (vertical column) -->
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-gray-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-gray-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">No activity</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-900 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-900"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">1 contribution</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">5 contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-fuchsia-600 transition-colors duration-200 dark:bg-fuchsia-600 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">10 contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-pink-500 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-pink-500"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">20+ contributions</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-gray-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-gray-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">No activity</span>
            </div>
            <div class="w-full h-full relative cursor-pointer group">
                <div class="w-4 h-4 rounded-sm bg-purple-700 transition-colors duration-200 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:bg-purple-700"></div>
                <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-700 text-xs text-white rounded shadow-md whitespace-nowrap">4 contributions</span>
            </div>
            
            <!-- Fill the rest with randomly colored cells for demonstration -->
            <!-- Due to the 52 column structure, we need 52 * 7 cells. -->
            <!-- We've already added 7 specific ones for example. Need 357 more. -->
            <!-- In a real scenario, this would be dynamically generated. -->
            <!-- For the purpose of this component, we'll put a representative number of cells -->
            <!-- to simulate the full grid within Tailwind's capabilities. -->
            
            <!-- This loop is conceptual and needs manual expansion for the 52x7 grid -->
            <!-- Using 364 total cells to simulate a year -->
            <!-- I will generate a slice of cells for demonstration -->
            <!-- The actual number of cells is 52*7 = 364 -->
            
            <style>
                /* Tailwind's JIT mode handles arbitrary values like grid-cols-53. */
                /* For dynamic values like this, ensure your Tailwind config's safelist includes patterns if not using JIT or if for older versions. */
                /* Or, simply use explicit classes like grid-cols-[repeat(52,minmax(0,1fr))] */
                .grid-cols-53 {
                    grid-template-columns: repeat(53, minmax(0, 1fr));
                }
            </style>

            <!-- Loop for 51 more 'weeks' (51*7 = 357 cells) -->
            <!-- Randomly select a color class -->
            <!-- Keep this concise for the JSON output -->
            <!-- Example of dynamic generation, shortened for brevity here -->
            <!-- Total cells needed 364 (52 weeks * 7 days) -->
            <!-- Here we will approximate for demonstration, not generate all 364. -->
            <!-- We'll fill up to a significant portion that shows the layout. -->
            
            <!-- Example of ~6 weeks (42 cells) to show the pattern spread out: -->
            ${(() => {
                const colors = ['bg-gray-700', 'bg-purple-900', 'bg-purple-700', 'bg-fuchsia-600', 'bg-pink-500'];
                let cells = '';
                for (let i = 0; i < (52 * 7 - 7); i++) { // Fill the rest of the 364 cells (minus the 7 already placed)
                    const colorClass = colors[Math.floor(Math.random() * colors.length)];
                    const contributionText = colorClass === 'bg-gray-700' ? 'No activity' : `${Math.floor(Math.random() * 20) + 1} contributions`;
                    cells += `
                        <div class="w-4 h-4 rounded-sm ${colorClass} relative cursor-pointer group transition-colors duration-200 transform group-hover:scale-110 group-hover:ring-2 group-hover:ring-offset-1 group-hover:ring-cyan-500 dark:hover:ring-cyan-500">
                            <span class="absolute hidden group-hover:block top-[-25px] left-1/2 -translate-x-1/2 px-2 py-1 bg-black/70 text-xs text-white rounded shadow-md whitespace-nowrap z-10">${contributionText}</span>
                        </div>
                    `;
                }
                return cells;
            })()}
          </div>

          <!-- Day labels for vertical axis -->
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Tue</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Wed</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Thu</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Fri</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Sat</div>
          <div class="col-span-52"></div>
          <div class="text-right text-xs text-gray-400 pr-2 col-span-1">Sun</div>
          <div class="col-span-52"></div>

        </div>
      </div>

      <p class="text-right text-gray-500 text-sm mt-4 dark:text-gray-500">Last updated: Jan 1, 2024</p>
    </div>
  </div>
</div>

Heat Maps Component

A minimalist and flat design heat map component with muted colors, suitable for gaming websites. Features a grid display of activity levels, responsive across devices, and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-extrabold mb-6 sm:mb-8 text-center text-gray-900 dark:text-white">Weekly Activity Heatmap</h2>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">
      <div class="grid grid-cols-8 gap-1 sm:gap-2 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400">
        <div class="col-span-1 text-center hidden sm:block">Sun</div>
        <div class="col-span-1 text-center hidden sm:block">Mon</div>
        <div class="col-span-1 text-center hidden sm:block">Tue</div>
        <div class="col-span-1 text-center hidden sm:block">Wed</div>
        <div class="col-span-1 text-center hidden sm:block">Thu</div>
        <div class="col-span-1 text-center hidden sm:block">Fri</div>
        <div class="col-span-1 text-center hidden sm:block">Sat</div>
        <div class="col-span-1 text-center hidden lg:block">Score</div>
        <div class="col-span-7 grid grid-cols-7 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400 sm:hidden">
          <div class="text-center">Sun</div>
          <div class="text-center">Mon</div>
          <div class="text-center">Tue</div>
          <div class="text-center">Wed</div>
          <div class="text-center">Thu</div>
          <div class="text-center">Fri</div>
          <div class="text-center">Sat</div>
        </div>
      </div>

      <div class="grid grid-cols-8 sm:grid-cols-8 gap-1 sm:gap-2">
        <!-- Example Row 1 - Day 1 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 10">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">10</span>
        </div>
        <!-- Day 2 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-200 dark:bg-green-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 30">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
        </div>
        <!-- Day 3 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-300 dark:bg-indigo-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 55">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">55</span>
        </div>
        <!-- Day 4 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-400 dark:bg-purple-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 78">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">78</span>
        </div>
        <!-- Day 5 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-400 dark:bg-red-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 92">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">92</span>
        </div>
        <!-- Day 6 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-300 dark:bg-blue-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 65">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">65</span>
        </div>
        <!-- Day 7 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-400 dark:bg-yellow-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 88">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">88</span>
        </div>
        <!-- Score Indicator -->
        <div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">High</div>


        <!-- Example Row 2 - Day 1 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-300 dark:bg-red-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 70">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">70</span>
        </div>
        <!-- Day 2 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-300 dark:bg-yellow-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 60">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">60</span>
        </div>
        <!-- Day 3 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 20">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">20</span>
        </div>
        <!-- Day 4 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-300 dark:bg-purple-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 45">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">45</span>
        </div>
        <!-- Day 5 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-400 dark:bg-green-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 80">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">80</span>
        </div>
        <!-- Day 6 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-200 dark:bg-indigo-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 35">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">35</span>
        </div>
        <!-- Day 7 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-400 dark:bg-blue-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 95">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">95</span>
        </div>
        <!-- Score Indicator -->
        <div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Medium</div>

        <!-- Add more rows as needed -->
        <!-- Example Row 3 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-200 dark:bg-blue-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 25">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">25</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-200 dark:bg-red-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 40">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">40</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-300 dark:bg-green-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 50">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">50</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-200 dark:bg-yellow-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 15">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">15</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-400 dark:bg-indigo-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 85">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">85</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-200 dark:bg-purple-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 30">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-200 dark:bg-gray-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 5">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">05</span>
        </div>
        <div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Low</div>
      </div>

      <div class="flex justify-between items-center mt-6 sm:mt-8">
        <div class="text-sm text-gray-600 dark:text-gray-400">Current Week: <span class="font-medium">Nov 27 - Dec 03</span></div>
        <a href="#" class="text-sm font-semibold text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200">
          View All Activity &rarr;
        </a>
      </div>
    </div>

    <div class="mt-8 text-center">
      <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Activity Insights</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
          <p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Peak Activity Day:</p>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">Saturday</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Highest Engagement Score</p>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
          <p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Average Daily Score:</p>
          <p class="text-4xl font-extrabold text-green-600 dark:text-green-400">67</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Across the entire week</p>
        </div>
      </div>
    </div>

  </div>
</div>

Heat Maps Component

A responsive heat map component with an industrial, forest green aesthetic for social media interfaces, supporting light and dark modes.

Open Preview

                <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>

Heat Maps Component

A playful and fun heat map component for news and journalism websites, featuring bright, cheerful design with rounded elements and friendly aesthetics, using a corporate blue color scheme. Includes responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-900 dark:text-blue-100 mb-4 sm:mb-6 lg:mb-8 text-center">
      Today's Hottest Topics
    </h2>
    <p class="text-lg text-blue-700 dark:text-blue-300 mb-8 sm:mb-10 lg:mb-12 text-center max-w-2xl mx-auto">
      Explore the most engaging and talked-about stories right now. The bigger the bubble, the more buzz it's generating!
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Heat Map Item 1 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-500 dark:bg-blue-600 scale-125 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-5xl sm:text-6xl font-bold text-blue-800 dark:text-blue-200">95%</span>
          </div>
          <h3 class="text-2xl sm:text-3xl font-bold text-blue-900 dark:text-blue-100 mb-2">Climate Solutions</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New report highlights renewable energy breakthroughs.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 2 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-400 dark:bg-blue-500 scale-105 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-24 h-24 sm:w-32 sm:h-32 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-4xl sm:text-5xl font-bold text-blue-800 dark:text-blue-200">78%</span>
          </div>
          <h3 class="text-2xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Global Economy Shift</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Markets react to emerging trade policies.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 3 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-300 dark:bg-blue-400 scale-95 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-20 h-20 sm:w-28 sm:h-28 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-3xl sm:text-4xl font-bold text-blue-800 dark:text-blue-200">62%</span>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Tech Innovation Boom</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">AI advancements reshape daily life.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 4 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-200 dark:bg-blue-300 scale-90 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-2xl sm:text-3xl font-bold text-blue-800 dark:text-blue-200">45%</span>
          </div>
          <h3 class="text-xl sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Health & Wellness</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New trends in mental health.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 5 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-100 dark:bg-blue-200 scale-85 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-12 h-12 sm:w-20 sm:h-20 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200">28%</span>
          </div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Space Exploration</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New missions planned for Mars.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <!-- Heat Map Item 6 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-50 dark:bg-blue-100 scale-80 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-8 h-8 sm:w-16 sm:h-16 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-lg sm:text-xl font-bold text-blue-800 dark:text-blue-200">15%</span>
          </div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Cultural Trends</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Popular music genres evolving.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 sm:mt-16 lg:mt-20 text-center">
      <a href="#" class="px-8 py-3 rounded-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out dark:from-blue-700 dark:to-blue-800">
        Explore All Topics
      </a>
    </div>
  </div>
</div>

<style>
  /* This is a simple animation for the circles, typically done via JS for dynamic content, 
     but for a static HTML component, CSS animation can simulate a 'pulse' or 'grow' effect. */
  @keyframes scalePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  .scale-animation {
    animation: scalePulse 2s infinite ease-in-out;
  }
</style>

Heat Maps Component

A simple, responsive heat map component for agriculture/farming websites, featuring a retro/vintage color scheme and dark mode support, designed with microinteractions in mind.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-colors duration-300">
    <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Field Soil Moisture Heatmap</h2>
      <div class="relative group">
        <button class="px-4 py-2 bg-green-700 hover:bg-green-600 active:bg-green-800 text-white text-sm font-semibold rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition-all duration-200 ease-in-out transform group-hover:scale-105 group-hover:rotate-1 group-active:scale-95">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 17V6zm9 6a1 1 0 11-2 0 1 1 0 012 0zm-3 1a1 1 0 100-2 1 1 0 000 2zm6-2a1 1 0 11-2 0 1 1 0 012 0z" clip-rule="evenodd" />
          </svg>
          View Details
        </button>
        <div class="absolute bottom-full mb-2 hidden group-hover:block transition-all duration-300 ease-out opacity-0 group-hover:opacity-100 -left-8 right-0 mx-auto w-48 p-2 text-xs text-white bg-gray-700 dark:bg-gray-900 rounded-md shadow-lg pointer-events-none origin-bottom scale-90 group-hover:scale-100">
          More information about this heatmap.
          <div class="absolute left-1/2 -ml-1 w-0 h-0 border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-900 transform translate-y-full -bottom-2"></div>
        </div>
      </div>
    </div>
    <div class="p-6">
      <div class="flex flex-col md:flex-row gap-6">
        <div class="relative flex-1 bg-gradient-to-br from-indigo-200 via-teal-200 to-yellow-200 dark:from-indigo-900/40 dark:via-teal-900/40 dark:to-yellow-900/40 rounded-lg p-6 shadow-inner overflow-hidden border-2 border-dashed border-gray-400 dark:border-gray-600 transition-all duration-300 group-hover:border-solid">
          <div class="absolute inset-0 bg-contain bg-no-repeat bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/farm/800/600'); filter: grayscale(100%);"></div>
          <div class="relative grid grid-cols-5 md:grid-cols-10 gap-1.5 auto-rows-min md:auto-rows-fr h-full" style="min-height: 200px;">
            <!-- Heatmap Cells -->
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="85%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">85%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="78%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">78%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="72%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">72%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="65%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">65%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="59%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">59%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="52%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">52%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="45%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">45%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="39%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">39%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="33%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">33%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="28%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">28%</span>
            </div>
            <!-- Repeat for more cells, adjusting background-color and data-tooltip-value -->
             <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="88%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">88%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="81%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">81%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="75%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">75%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="68%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">68%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="62%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">62%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="55%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">55%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="48%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">48%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="42%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">42%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="36%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">36%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="30%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">30%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="90%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">90%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="83%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">83%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="77%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">77%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="70%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">70%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="64%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">64%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="57%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">57%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="50%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">50%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="44%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">44%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="38%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">38%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="32%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">32%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="87%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">87%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="80%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">80%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="74%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">74%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="67%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">67%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="61%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">61%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="54%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">54%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="47%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">47%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="41%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">41%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="35%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">35%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="29%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">29%</span>
            </div>
            <!-- More rows/cols as needed for a larger grid -->
          </div>
        </div>

        <div class="flex flex-col space-y-4 md:w-1/3 min-w-[150px]">
          <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Legend</h3>
            <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #fef08a;"></span>High Moisture (80-100%)</li>
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #e0c878;"></span>Medium Moisture (50-79%)</li>
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #697718;"></span>Low Moisture (0-49%)</li>
            </ul>
          </div>
          <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Last Updated</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300">2023-10-27, 10:30 AM</p>
            <div class="flex items-center space-x-2 mt-4 text-gray-600 dark:text-gray-300">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Operator Photo" class="w-8 h-8 rounded-full border-2 border-green-600 dark:border-green-400 object-cover transform hover:scale-110 transition-transform duration-200 animate-pulse-slight">
              <p class="text-sm">By John Doe, Farm Ops</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-6 pt-4 text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
      <p>Data provided by AgriSense Pro sensors. For optimal yield, consider irrigating areas with less than 60% soil moisture.</p>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for Retro/Vintage color palette for heatmap cells */
  /* These colors are manually set for demonstration */
  
  /* High Moisture (Warm/Yellow Tones) */
  [data-tooltip-value^='8'],
  [data-tooltip-value^='7'] {
    --cell-color: #fef08a; /* lightest yellow */
    --cell-color-darker: #d9b62c; /* darker yellow for border/active */
  }

  /* Medium Moisture (Muted Green/Brown Tones) */
  [data-tooltip-value^='6'],
  [data-tooltip-value^='5'] {
    --cell-color: #e0c878; /* light brown/khaki */
    --cell-color-darker: #b78f4a; /* darker brown for border/active */
  }

  /* Low Moisture (Desaturated Green/Gray Tones) */
  [data-tooltip-value^='4'],
  [data-tooltip-value^='3'],
  [data-tooltip-value^='2'] {
    --cell-color: #697718; /* muted dark green */
    --cell-color-darker: #313300; /* even darker green for border/active */
  }

  /* Example of how to add more nuanced colors if needed, e.g., for in-between ranges */
  [data-tooltip-value='85%'] { --cell-color: #fef08a; --cell-color-darker: #d9b62c; }
  [data-tooltip-value='78%'] { --cell-color: #f9e2ae; --cell-color-darker: #d1a65f; }
  [data-tooltip-value='72%'] { --cell-color: #f2d596; --cell-color-darker: #c69b59; }
  [data-tooltip-value='65%'] { --cell-color: #e0c878; --cell-color-darker: #b78f4a; }
  [data-tooltip-value='59%'] { --cell-color: #c8b760; --cell-color-darker: #9a8a3a; }
  [data-tooltip-value='52%'] { --cell-color: #b1a748; --cell-color-darker: #817a26; }
  [data-tooltip-value='45%'] { --cell-color: #999738; --cell-color-darker: #656417; }
  [data-tooltip-value='39%'] { --cell-color: #818728; --cell-color-darker: #4b4f00; }
  [data-tooltip-value='33%'] { --cell-color: #697718; --cell-color-darker: #313300; }
  [data-tooltip-value='28%'] { --cell-color: #516708; --cell-color-darker: #171800; }

  /* Ensure a smooth transition for colors if possible with more granular data points */
  /* This is a simplification; a real app would likely use JS to calculate colors based on value */

  @keyframes pulse-slight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }

  .animate-pulse-slight {
    animation: pulse-slight 2s infinite ease-in-out;
  }

</style>

E-commerce Heat Map Component - Watercolor Neon

A responsive e-commerce heat map component with a watercolor/artistic style and a neon/electric color scheme, supporting dark mode. It represents product interest or sales data using a grid of glowing cells.

Open Preview

                <div class="bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans antialiased">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-400 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-200 mb-8 text-center drop-shadow-lg leading-tight">
    Product Interest Heatmap
  </h2>
  <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-2xl mx-auto opacity-90">
    Visualize customer engagement and popular items with this artistic heatmap of product categories. Each 'glow' represents a higher level of user interaction.
  </p>

  <!-- Heatmap Grid Container -->
  <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 p-4 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-800 dark:to-gray-950 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden relative border border-purple-200 dark:border-indigo-700">

    <!-- Background artistic elements (optional, can be simplified for pure Tailwind) -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <filter id="watercolorBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
          </filter>
        </defs>
        <circle cx="10" cy="10" r="8" fill="#f06" filter="url(#watercolorBlur)" />
        <circle cx="90" cy="20" r="12" fill="#0cf" filter="url(#watercolorBlur)" />
        <circle cx="30" cy="80" r="10" fill="#6f0" filter="url(#watercolorBlur)" />
        <circle cx="70" cy="90" r="15" fill="#ff0" filter="url(#watercolorBlur)" />
      </svg>
    </div>

    <!-- Individual Heatmap Cells -->
    <!-- Cell 1: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-pink-300 dark:hover:border-pink-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-60 group-hover:opacity-80"
        style="box-shadow: 0 0 40px #ff00ff, 0 0 80px #ff00ff;"></div>
      <img src="https://picsum.photos/seed/heatmap1/300/200" alt="Electronics" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-pink-300 dark:border-pink-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Electronics</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">12,000+ views</p>
    </div>

    <!-- Cell 2: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-lime-200 dark:hover:border-lime-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-40 group-hover:opacity-60"
        style="box-shadow: 0 0 30px #00ff00, 0 0 60px #00ff00;"></div>
      <img src="https://picsum.photos/seed/heatmap2/300/200" alt="Apparel" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-lime-300 dark:border-lime-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Apparel</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">8,900+ views</p>
    </div>

    <!-- Cell 3: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-blue-300 dark:hover:border-blue-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-70 group-hover:opacity-90"
        style="box-shadow: 0 0 50px #00bfff, 0 0 100px #00bfff;"></div>
      <img src="https://picsum.photos/seed/heatmap3/300/200" alt="Home Goods" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-blue-300 dark:border-blue-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Home Goods</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">15,500+ views</p>
    </div>

    <!-- Cell 4: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-purple-300 dark:hover:border-purple-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-50 group-hover:opacity-70"
        style="box-shadow: 0 0 35px #8a2be2, 0 0 70px #8a2be2;"></div>
      <img src="https://picsum.photos/seed/heatmap4/300/200" alt="Books & Media" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-purple-300 dark:border-purple-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Books & Media</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">9,800+ views</p>
    </div>

    <!-- Cell 5: Low Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-yellow-200 dark:hover:border-yellow-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-20 group-hover:opacity-40"
        style="box-shadow: 0 0 20px #ffff00, 0 0 40px #ffff00;"></div>
      <img src="https://picsum.photos/seed/heatmap5/300/200" alt="Sports Gear" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-yellow-300 dark:border-yellow-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Sports Gear</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">4,100+ views</p>
    </div>

    <!-- Cell 6: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-rose-300 dark:hover:border-rose-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-65 group-hover:opacity-85"
        style="box-shadow: 0 0 45px #ff1493, 0 0 90px #ff1493;"></div>
      <img src="https://picsum.photos/seed/heatmap6/300/200" alt="Beauty Products" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-rose-300 dark:border-rose-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Beauty Products</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">11,200+ views</p>
    </div>

    <!-- Cell 7: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-cyan-300 dark:hover:border-cyan-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-45 group-hover:opacity-65"
        style="box-shadow: 0 0 32px #00ffff, 0 0 64px #00ffff;"></div>
      <img src="https://picsum.photos/seed/heatmap7/300/200" alt="Kids & Toys" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-cyan-300 dark:border-cyan-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Kids & Toys</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">7,500+ views</p>
    </div>

    <!-- Cell 8: Low Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-emerald-200 dark:hover:border-emerald-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-25 group-hover:opacity-45"
        style="box-shadow: 0 0 25px #3cb371, 0 0 50px #3cb371;"></div>
      <img src="https://picsum.photos/seed/heatmap8/300/200" alt="Pet Supplies" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-emerald-300 dark:border-emerald-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Pet Supplies</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">3,200+ views</p>
    </div>

  </div>
</div>

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.

Open Preview

                <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 Maps Component

A monospace, developer-inspired heat map component with earth tones, designed for consulting/services. Features a grid-like display simulating heat map data for different days, responsive across devices, and supports dark mode.

Open Preview

                <div class="font-mono bg-stone-100 text-stone-800 py-12 px-4 sm:px-6 lg:px-8 dark:bg-stone-900 dark:text-stone-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-bold text-center mb-4 dark:text-stone-100">
      <span class="text-emerald-600 dark:text-emerald-400">//</span> Activity Overview
    </h2>
    <p class="text-center text-lg mb-10 text-stone-600 dark:text-stone-400">
      Review your contributions and activity patterns.
    </p>

    <div class="bg-white border border-stone-200 rounded-lg shadow-lg overflow-hidden dark:bg-stone-800 dark:border-stone-700">
      <div class="p-6">
        <div class="flex items-center justify-between mb-6">
          <div class="flex space-x-2 text-sm text-stone-500 dark:text-stone-400">
            <span>2023</span>
            <span class="text-emerald-600 dark:text-emerald-400">//</span>
            <span>Activity</span>
          </div>
          <div class="flex items-center space-x-2 text-sm">
            <div class="w-3 h-3 bg-stone-200 dark:bg-stone-700 rounded-sm" title="No activity"></div>
            <div class="w-3 h-3 bg-emerald-100 dark:bg-emerald-800 rounded-sm" title="Low activity"></div>
            <div class="w-3 h-3 bg-emerald-300 dark:bg-emerald-600 rounded-sm" title="Moderate activity"></div>
            <div class="w-3 h-3 bg-emerald-500 dark:bg-emerald-400 rounded-sm" title="High activity"></div>
            <div class="w-3 h-3 bg-emerald-700 dark:bg-emerald-300 rounded-sm" title="Very High activity"></div>
            <span class="ml-2 text-stone-600 dark:text-stone-400">Less</span>
            <span class="text-stone-600 dark:text-stone-400">More</span>
          </div>
        </div>

        <div class="grid gap-1 grid-flow-col auto-cols-max overflow-x-auto pb-4 custom-scrollbar">
          <!-- Days of Week Labels (Hidden on small, visible on larger) -->
          <div class="hidden md:flex flex-col justify-start text-xs text-stone-500 dark:text-stone-400 pt-2">
            <div class="h-4 leading-4 mb-1"></div>
            <div class="h-4 leading-4 mb-1">Mon</div>
            <div class="h-4 leading-4 mb-1"></div>
            <div class="h-4 leading-4 mb-1">Wed</div>
            <div class="h-4 leading-4 mb-1"></div>
            <div class="h-4 leading-4 mb-1">Fri</div>
            <div class="h-4 leading-4 mb-1"></div>
          </div>

          <!-- Month Row -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jan</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 1: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 2: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 3: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 5: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 6: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 7: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 8: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 9: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 10: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 11: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 12: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 13: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 14: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 15: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 16: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 17: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 18: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 19: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 20: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 21: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 22: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 23: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 24: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 25: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 26: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Jan 27: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Jan 28: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Jan 29: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Jan 30: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Jan 31: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 1: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 2: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 3: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 4: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 5: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 6: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 7: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 8: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 9: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 10: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 11: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 12: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 13: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 14: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 15: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 16: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 17: No activity"></div>
          </div>

          <!-- Continue with more month columns as needed to fill 12 months -->
          <!-- Example: March -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 18: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 19: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 20: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 21: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 22: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Feb 23: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 24: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Feb 25: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Feb 26: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Feb 27: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Feb 28: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 1: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Mar</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 2: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 3: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 4: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 5: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 6: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 7: No activity"></div>
          </div>
           <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 10: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 11: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 12: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 13: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 14: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 15: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 16: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 17: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 18: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 19: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 20: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 21: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 22: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 23: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 24: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 25: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 26: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="March 27: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="March 28: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="March 29: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="March 30: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="March 31: No activity"></div>
          </div>
          <!-- End example months -->

          <!-- Placeholder to continue the pattern for more months (e.g., April, May, etc.) -->
          <!-- Copy and paste a 'grid grid-rows-7' block for each additional month, updating 'col-span-1 text-xs' for the month label -->
          <!-- Also update the `title` attribute for each square to reflect the correct date and activity level -->
          <!-- APR -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Apr</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 3: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 5: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 6: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 7: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 10: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 11: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 12: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 13: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 14: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 15: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 16: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 17: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 18: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 19: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 20: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 21: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 22: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 23: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 24: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 25: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="April 26: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="April 27: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="April 28: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="April 29: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="April 30: No activity"></div>
          </div>
          <!-- MAY -->
           <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">May</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 3: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 5: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 6: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 7: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 10: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 11: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 12: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 13: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 14: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 15: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 16: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 17: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 18: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 19: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 20: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 21: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 22: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 23: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 24: No activity"></div>
          </div>
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 25: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="May 26: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 27: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="May 28: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="May 29: High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="May 30: No activity"></div>
          </div>
           <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-transparent h-4 leading-4"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="May 31: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="June 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="June 3: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="June 4: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 5: High"></div>
          </div>
          <!-- JUN -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jun</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-light dark:bg-emerald-darker-3" title="June 6: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="June 7: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="June 8: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="June 9: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="June 10: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="June 11: Low"></div>
          </div>
          <!-- JUL -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Jul</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="July 1: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="July 2: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="July 3: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="July 4: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="July 5: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="July 6: Moderate"></div>
          </div>
          <!-- AUG -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Aug</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Aug 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Aug 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Aug 3: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Aug 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Aug 5: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Aug 6: High"></div>
          </div>
          <!-- SEP -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Sep</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Sep 1: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Sep 2: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Sep 3: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Sep 4: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Sep 5: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Sep 6: No activity"></div>
          </div>
          <!-- OCT -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Oct</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Oct 1: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Oct 2: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Oct 3: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Oct 4: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Oct 5: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Oct 6: Low"></div>
          </div>
          <!-- NOV -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Nov</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Nov 1: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Nov 2: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Nov 3: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Nov 4: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Nov 5: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Nov 6: Moderate"></div>
          </div>
          <!-- DEC -->
          <div class="grid grid-rows-7 gap-1 pt-2">
            <div class="col-span-1 text-xs text-stone-500 dark:text-stone-400 h-4 leading-4 text-left">Dec</div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Dec 1: High"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-700 dark:bg-emerald-300" title="Dec 2: Very High"></div>
            <div class="w-4 h-4 rounded-sm bg-stone-200 dark:bg-stone-700" title="Dec 3: No activity"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-800" title="Dec 4: Low"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-600" title="Dec 5: Moderate"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-400" title="Dec 6: High"></div>
          </div>
        </div>
      </div>
      <div class="p-6 border-t border-stone-200 dark:border-stone-700 text-sm text-stone-500 flex justify-between items-center dark:text-stone-400">
        <p>
          <span class="text-emerald-600 dark:text-emerald-400">//</span> Last updated: Today
        </p>
        <p>
          <a href="#" class="text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300">View detailed logs</a>
        </p>
      </div>
    </div>
  </div>
  <style>
    /* Custom scrollbar for better aesthetics, especially in dark mode */
    .custom-scrollbar::-webkit-scrollbar {
      height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.stone.300');
      border-radius: 10px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.stone.700');
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: theme('colors.emerald.500');
      border-radius: 10px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: theme('colors.emerald.400');
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: theme('colors.emerald.600');
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: theme('colors.emerald.300');
    }

    /* Ensure rows line up */
    .grid-rows-7 > div:first-child {
        grid-row: 1 / span 1;
    }

  </style>
</div>

Luxury_Premium_Heatmap_Component

An elegant and sophisticated triadic-colored heatmap component designed for news and journalism websites, showcasing article popularity or engagement. It features refined typography, subtle gradients, and full responsiveness with dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="container mx-auto max-w-7xl bg-white dark:bg-gray-850 shadow-xl rounded-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-semibold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
        Top Stories Heatmap
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl">
        Explore the most engaging articles and popular topics at a glance. Darker shades indicate higher engagement.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-6 sm:p-8 lg:p-10">

      <!-- Heatmap Item 1 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
        style="background: linear-gradient(to bottom right, #FFD700, #DAA520);">
        <div class="absolute inset-0 bg-black bg-opacity-10 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-gray-900 dark:text-gray-800 tracking-wider mb-1 block">High Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-gray-800 dark:text-gray-900 leading-snug mb-2">
              <a href="#" class="hover:underline">Global Markets Brace for Economic Shift</a>
            </h3>
            <p class="text-sm text-gray-700 dark:text-gray-900 leading-relaxed mb-4">
              Analysts forecast significant changes in financial landscapes following recent policy announcements...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-gray-800 dark:text-gray-900">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-gray-600 dark:border-gray-800">
            <span>By John Doe</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 2 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
        style="background: linear-gradient(to bottom right, #6A5ACD, #483D8B);">
        <div class="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-gray-100 tracking-wider mb-1 block">Moderate Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-gray-50 leading-snug mb-2">
              <a href="#" class="hover:underline">Innovations in Sustainable Urban Planning</a>
            </h3>
            <p class="text-sm text-gray-200 leading-relaxed mb-4">
              Cities worldwide are adopting new eco-friendly strategies to enhance livability...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-gray-100">
            <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-gray-300"]
            ><span>By Jane Smith</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 3 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg"
        style="background: linear-gradient(to bottom right, #A0522D, #8B4513);">
        <div class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-pink-100 tracking-wider mb-1 block">Emerging Topic</span>
            <h3 class="font-bold text-xl sm:text-2xl text-pink-50 leading-snug mb-2">
              <a href="#" class="hover:underline">The Revival of Artisanal Craftsmanship</a>
            </h3>
            <p class="text-sm text-pink-100 leading-relaxed mb-4">
              A new generation embraces traditional skills, bringing handmade goods back into vogue...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-pink-100">
            <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-pink-300">
            <span>By David Lee</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 4 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden xl:block"
        style="background: linear-gradient(to bottom right, #FF8C00, #CD6600);">
        <div class="absolute inset-0 bg-black bg-opacity-15 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-amber-900 tracking-wider mb-1 block">High Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-amber-800 leading-snug mb-2">
              <a href="#" class="hover:underline">Breakthroughs in AI Ethics and Governance</a>
            </h3>
            <p class="text-sm text-amber-700 leading-relaxed mb-4">
              New frameworks are emerging to guide the responsible development of artificial intelligence...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-amber-800">
            <img src="https://randomuser.me/api/portraits/women/9.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-600">
            <span>By Sarah Chen</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 5 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden md:block"
        style="background: linear-gradient(to bottom right, #8A2BE2, #6A0DAD);">
        <div class="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-purple-100 tracking-wider mb-1 block">Moderate Engagement</span>
            <h3 class="font-bold text-xl sm:text-2xl text-purple-50 leading-snug mb-2">
              <a href="#" class="hover:underline">The Future of Remote Work and Collaboration</a>
            </h3>
            <p class="text-sm text-purple-100 leading-relaxed mb-4">
              Companies are reimagining office dynamics with advanced tools and flexible policies...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-purple-100">
            <img src="%3A%2F%2Frandomuser.me%2Fapi%2Fportraits%2Fmen%2F12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-purple-300">
            <span>By Mark Johnson</span>
          </div>
        </div>
      </div>

      <!-- Heatmap Item 6 -->
      <div class="relative group rounded-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-lg hidden lg:block"
        style="background: linear-gradient(to bottom right, #5F9EA0, #2F4F4F);">
        <div class="absolute inset-0 bg-black bg-opacity-35 group-hover:bg-opacity-0 transition-opacity duration-300"></div>
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <span class="text-xs font-bold uppercase text-teal-100 tracking-wider mb-1 block">New Discovery</span>
            <h3 class="font-bold text-xl sm:text-2xl text-teal-50 leading-snug mb-2">
              <a href="#" class="hover:underline">Unveiling Ancient Civilizations: New Archeological Finds</a>
            </h3>
            <p class="text-sm text-teal-100 leading-relaxed mb-4">
              Recent excavations shed light on previously unknown aspects of ancient history...
            </p>
          </div>
          <div class="flex items-center text-sm font-medium text-teal-100">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-teal-300">
            <span>By Emily White</span>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-gray-200 dark:border-gray-700 text-center">
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Data updated hourly. For more details, visit our <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 font-medium">analytics dashboard</a>.
      </p>
    </div>
  </div>
</div>

Search Components

Categories

Heat Maps