Search Components

Heat Maps

Graphical representation of data using color intensity

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>

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>

Heat Maps Component

A minimalist and flat design heat map component for dashboards, featuring a complementary color scheme, responsive layout, and dark mode support. Displays activity levels over time.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Activity Heatmap</h2>
      <p class="text-gray-600 dark:text-gray-400">Daily activity over the last year.</p>
    </div>

    <div class="p-6 sm:p-8">
      <div class="flex justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-2 sm:mb-4">
        <span>Mon</span>
        <span>Wed</span>
        <span>Fri</span>
      </div>

      <div class="grid grid-flow-col auto-cols-min sm:auto-cols-max gap-1 sm:gap-1.5 md:gap-2 overflow-x-auto pb-4 scrollbar-hide">
        <!-- Loop for months - ideally this would be dynamic -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Jan</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <!-- Loop for days in January -->
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 2: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 3: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 4: 12 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 5: 20 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 6: 25 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jan 7: 0 activity"></div>
            </div>
        </div>

        <!-- Example Month Blocks (repeated and varied for visual effect) -->
        <!-- Add more blocks for remaining months, varying colors for dummy data -->
        <!-- February -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Feb</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 2: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 3: 7 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 4: 15 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 5: 18 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 6: 22 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Feb 7: 1 activity"></div>
            </div>
        </div>

        <!-- March -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Mar</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 1: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 2: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 3: 16 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 4: 21 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 5: 28 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 6: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Mar 7: 4 activity"></div>
            </div>
        </div>

        <!-- April -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Apr</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 1: 6 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 2: 10 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 3: 19 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 4: 26 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 5: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 6: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Apr 7: 8 activity"></div>
            </div>
        </div>

        <!-- May -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">May</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 1: 11 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 2: 17 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 3: 24 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 4: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 5: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 6: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="May 7: 14 activity"></div>
            </div>
        </div>

         <!-- ... Continue for remaining months ensuring enough columns for full year -->
        <!-- June -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Jun</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 1: 18 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 2: 25 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 3: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 4: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 5: 10 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 6: 15 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jun 7: 20 activity"></div>
            </div>
        </div>

        <!-- July -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Jul</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 1: 27 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 2: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 3: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 4: 7 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 5: 12 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 6: 19 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Jul 7: 23 activity"></div>
            </div>
        </div>

        <!-- August -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Aug</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 2: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 3: 6 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 4: 13 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 5: 20 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 6: 25 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Aug 7: 0 activity"></div>
            </div>
        </div>

        <!-- September -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Sep</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 1: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 2: 8 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 3: 14 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 4: 19 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 5: 24 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 6: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Sep 7: 4 activity"></div>
            </div>
        </div>

        <!-- October -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Oct</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 1: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 2: 11 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 3: 17 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 4: 22 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 5: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 6: 6 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Oct 7: 9 activity"></div>
            </div>
        </div>

        <!-- November -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Nov</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 1: 13 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 2: 18 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 3: 26 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 4: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 5: 2 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 6: 7 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Nov 7: 12 activity"></div>
            </div>
        </div>

        <!-- December -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px]">
            <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Dec</span>
            <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 1: 16 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 2: 21 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 3: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 4: 4 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 5: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 6: 14 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Dec 7: 19 activity"></div>
            </div>
        </div>

        <!-- Add more columns to represent ~52 weeks for a full year. For demonstration, we'll repeat a block. -->
        <!-- Repeat previous month blocks as columns to fill out roughly a year's worth of data -->
        <!-- Repeating these for visual example, ideally this would be real data -->
        <!-- This represents a week's worth of data for a specific day of the week over the year -->
        <!-- Total columns should be ~52 if each column represents a week -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 1: 8 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 2: 15 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 3: 20 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 4: 25 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 5: 18 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-400 dark:bg-blue-600 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 6: 10 activity"></div>
             <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-200 dark:bg-blue-800 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week X, Day 7: 5 activity"></div>
          </div>
        </div>

        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 1: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 2: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 3: 4 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 4: 9 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 5: 14 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 6: 20 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Y, Day 7: 23 activity"></div>
          </div>
        </div>
        <!-- More columns to fill up to approximately 52 for a full year -->
        <!-- This includes 12 explicit month blocks + 2 dummy blocks, so 14 total. Need ~38 more to make 52. -->
        <!-- For brevity, we'll stop here but in a real app, logic would generate 52 weeks -->
        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 1: 12 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 2: 17 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 3: 22 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 4: 0 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 5: 3 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 6: 8 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week Z, Day 7: 13 activity"></div>
          </div>
        </div>

        <div class="flex flex-col items-center justify-start min-w-[30px] sm:min-w-[40px] text-xs text-gray-500 dark:text-gray-400">
          <span class="mb-1"></span>
          <div class="grid grid-rows-7 gap-1 sm:gap-1.5 md:gap-2">
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-600 dark:bg-blue-400 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 1: 16 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-800 dark:bg-blue-200 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 2: 24 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-gray-200 dark:bg-gray-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 3: 1 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-100 dark:bg-blue-900 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 4: 5 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-300 dark:bg-blue-700 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 5: 10 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-500 dark:bg-blue-500 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 6: 15 activity"></div>
            <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 bg-blue-700 dark:bg-blue-300 rounded-sm hover:ring-2 ring-blue-400 dark:ring-blue-600 transition-all duration-200 cursor-pointer" title="Week AA, Day 7: 20 activity"></div>
          </div>
        </div>

      </div>

      <div class="flex justify-end items-center text-xs text-gray-500 dark:text-gray-400 mt-4">
        <span class="mr-2">Less</span>
        <div class="flex gap-1">
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-gray-200 dark:bg-gray-700 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-100 dark:bg-blue-900 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-300 dark:bg-blue-700 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-500 dark:bg-blue-500 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-700 dark:bg-blue-300 rounded-sm"></div>
          <div class="w-4 h-4 sm:w-5 sm:h-5 bg-blue-800 dark:bg-blue-200 rounded-sm"></div>
        </div>
        <span class="ml-2">More</span>
      </div>
    </div>
  </div>
</div>

<style>
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
</style>

Neumorphic Heat Map Component

A responsive, neumorphic heat map component with a triadic color scheme, designed for business and corporate websites. Features soft shadows and dark mode support, displaying data intensity visually.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-850 p-6 sm:p-8 rounded-2xl shadow-xl dark:shadow-xl-dark transition-all duration-300 transform
              neumorphic-light dark:neumorphic-dark
              border border-gray-300 dark:border-gray-700">

    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Website Activity Heatmap</h2>
      <div class="relative inline-block text-left">
        <button type="button" class="inline-flex justify-center w-full rounded-xl border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gray-200 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 neumorphic-button-light dark:neumorphic-button-dark" id="menu-button" aria-expanded="true" aria-haspopup="true">
          Last 30 Days
          <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <div class="overflow-x-auto pb-4">
      <div class="grid grid-cols-7 gap-2 sm:gap-3 lg:gap-4 min-w-[500px]">
        <!-- Days Row -->
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Mon</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Tue</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Wed</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Thu</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Fri</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sat</div>
        <div class="text-center text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-semibold">Sun</div>

        <!-- Heatmap Grid Cells -->
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.1;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-95" style="--intensity: 0.95;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-100" style="--intensity: 1.0;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-85" style="--intensity: 0.85;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-90" style="--intensity: 0.9;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-80" style="--intensity: 0.8;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-70" style="--intensity: 0.7;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-30" style="--intensity: 0.3;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-10" style="--intensity: 0.1;"></div>

        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-60" style="--intensity: 0.6;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-40" style="--intensity: 0.4;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-50" style="--intensity: 0.5;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-20" style="--intensity: 0.2;"></div>
        <div class="neumorphic-cell-light dark:neumorphic-cell-dark bg-opacity-5" style="--intensity: 0.05;"></div>

      </div>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
      <div class="flex items-center space-x-2 mb-4 sm:mb-0">
        <span class="font-medium">Intensity:</span>
        <div class="w-16 h-4 rounded-full bg-blue-300 dark:bg-blue-600 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <div class="w-16 h-4 rounded-full bg-blue-500 dark:bg-blue-500 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <div class="w-16 h-4 rounded-full bg-blue-700 dark:bg-blue-400 neumorphic-inner-light dark:neumorphic-inner-dark"></div>
        <span>Low</span>
        <span>High</span>
      </div>
      <p class="text-center sm:text-right">Last updated: <span class="font-semibold">Yesterday, 3:45 PM</span></p>
    </div>

    <style>
      /* Base background color and custom properties for neumorphism */
      .bg-gray-850 {
        background-color: #27272a;
      }
      .neumorphic-light {
        box-shadow: 8px 8px 16px #acacac, -8px -8px 16px #ffffff;
      }
      .dark\:neumorphic-dark {
        box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
      }

      /* Neumorphic buttons */
      .neumorphic-button-light {
        box-shadow: 4px 4px 8px #bdbdbd, -4px -4px 8px #ffffff;
      }
      .neumorphic-button-light:hover {
        box-shadow: 2px 2px 4px #bdbdbd, -2px -2px 4px #ffffff;
        transform: translateY(1px);
      }
      .dark\:neumorphic-button-dark {
        box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
      }
      .dark\:neumorphic-button-dark:hover {
        box-shadow: 2px 2px 4px #1a1a1a, -2px -2px 4px #333333;
        transform: translateY(1px);
      }

      /* Heatmap cells */
      .neumorphic-cell-light {
        width: 40px;
        height: 40px;
        min-width: 32px;
        min-height: 32px;
        max-width: 60px;
        max-height: 60px; /* Constraints for responsiveness */
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        background-color: hsl(200, 70%, 50%); /* Blue - primary triadic color */
        box-shadow: inset 3px 3px 6px #acacac, inset -3px -3px 6px #ffffff;
        transition: all 0.2s ease-in-out;
      }
      @media (min-width: 640px) {
        .neumorphic-cell-light {
          width: 50px;
          height: 50px;
        }
      }
      @media (min-width: 768px) {
        .neumorphic-cell-light {
            width: 55px;
            height: 55px;
        }
      }
      @media (min-width: 1024px) {
        .neumorphic-cell-light {
            width: 60px;
            height: 60px;
        }
      }

      .dark\:neumorphic-cell-dark {
        background-color: hsl(200, 70%, 40%); /* Darker blue */
        box-shadow: inset 3px 3px 6px #1a1a1a, inset -3px -3px 6px #333333;
        border: 1px solid rgba(255,255,255,0.05);
      }

      /* Intensity-based color variation for cells (applied via --intensity custom property) */
      .neumorphic-cell-light[style*='--intensity'] {
        background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(50% - var(--intensity, 0.5) * 10%)); /* Hue shift towards green/yellow, saturation/lightness adjust */
      }
      .dark\:neumorphic-cell-dark[style*='--intensity'] {
        background-color: hsl(calc(200 + var(--intensity, 0.5) * 40 - 20), calc(70% + var(--intensity, 0.5) * 10%), calc(40% + var(--intensity, 0.5) * 10%)); /* Darker base, shifts to lighter/more saturated with intensity */
      }

      /* Inner shadows for intensity legend */
      .neumorphic-inner-light {
        box-shadow: inset 2px 2px 4px #acacac, inset -2px -2px 4px #ffffff;
      }
      .dark\:neumorphic-inner-dark {
        box-shadow: inset 2px 2px 4px #1a1a1a, inset -2px -2px 4px #333333;
      }

      /* Triadic Color Scheme: Blue (Primary), Red-Orange, Green/Yellow for Accent/Highlight */
      /* Blue: hsl(200, 70%, 50%) -> Tailwind equivalent: blue-500, blue-300, blue-700 */
      /* Red-Orange: hsl(20, 70%, 50%) - could be used for danger/alert, not directly used in this heatmap intensity but good for overall palette */
      /* Green/Yellow: hsl(140, 70%, 50%) - subtle shift for higher intensity in light mode or as accent */
      /* The heatmap uses a subtle hue shift within the blue family for intensity, blending towards a greener blue for 'high' */
      /* The `bg-blue-300`, `bg-blue-500`, `bg-blue-700` in the legend illustrate intensity levels */
    </style>
  </div>
</div>

Heat Maps Component

A responsive 3D Heat Map component with complementary colors, suitable for blog and content consumption, featuring dark mode support.

Open Preview

                <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Monthly Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1 ">
    <!-- Days of the week -->
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sun</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Mon</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Tue</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Wed</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Thu</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Fri</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sat</div>

    <!-- Heatmap cells (example for 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      `<div key={i} class="relative w-8 h-8 md:w-10 md:h-10 transform perspective-1000 -rotate-x-15 rotate-y-15 p-1">
        <div class="absolute inset-0 rounded-md shadow-lg transition-all duration-300 transform
          ${i % 7 === 0 ? "bg-red-500 dark:bg-red-700" : ""}
          ${i % 7 === 1 ? "bg-red-600 dark:bg-red-800" : ""}
          ${i % 7 === 2 ? "bg-orange-500 dark:bg-orange-700" : ""}
          ${i % 7 === 3 ? "bg-orange-600 dark:bg-orange-800" : ""}
          ${i % 7 === 4 ? "bg-red-700 dark:bg-red-900" : ""}
          ${i % 7 === 5 ? "bg-red-800 dark:bg-red-950" : ""}
          ${i % 7 === 6 ? "bg-orange-700 dark:bg-orange-900" : ""}
          hover:scale-110 hover:rotate-x-0 hover:rotate-y-0
          group-hover:opacity-75
          flex items-center justify-center
          text-white text-xs font-bold
          ">
          ${i + 1}
        </div>
      </div>`
    )).join("")}
  </div>
  <div class="mt-4 flex justify-between text-gray-600 dark:text-gray-400">
    <span>Less</span>
    <div class="flex space-x-1">
      <div class="w-4 h-4 bg-red-400 dark:bg-red-600 rounded"></div>
      <div class="w-4 h-4 bg-red-500 dark:bg-red-700 rounded"></div>
      <div class="w-4 h-4 bg-red-600 dark:bg-red-800 rounded"></div>
      <div class="w-4 h-4 bg-red-700 dark:bg-red-900 rounded"></div>
      <div class="w-4 h-4 bg-red-800 dark:bg-red-950 rounded"></div>
    </div>
    <span>More</span>
  </div>
</div>

Search Components

Categories

Heat Maps