CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine minimalistische und flache Heatmap-Komponente für Dashboards mit komplementärem Farbschema, responsivem Layout und Unterstützung für den Dunkelmodus. Zeigt das Aktivitätsniveau im Zeitverlauf an.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente mit Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Es verfügt über ein einfaches Layout mit minimalen Elementen, das sich für einen Blog oder den Konsum von Inhalten eignet.

Offen

Heatmaps-Komponente

Eine Heatmaps-Komponente, die in einem brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts unter Verwendung von Tailwind CSS entworfen wurde. Es unterstützt reaktionsschnelle Effekte und ein dunkles Thema.

Offen

Heatmaps-Komponente

Eine einfache, reaktionsschnelle Heatmap-Komponente, die mit einer Retro/Vintage-Ästhetik unter Verwendung eines Pastell-Farbschemas gestaltet wurde und für Dashboards geeignet ist. Es bietet Unterstützung für dunkle Themen mit Tailwind CSS.

Offen