Componentes de búsqueda

Categorías

Componentes Mapas de calor

Mapas de calor

Representación gráfica de los datos mediante la intensidad del color

Componente Mapas de calor

Un componente de mapa de calor de diseño minimalista y plano para tableros, con un esquema de color complementario, un diseño receptivo y compatibilidad con el modo oscuro. Muestra los niveles de actividad a lo largo del tiempo.

Abrir Vista previa

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

Componente de mapa de calor neumórfico

Un componente de mapa de calor neumórfico receptivo con un esquema de color triádico, diseñado para sitios web comerciales y corporativos. Cuenta con sombras suaves y compatibilidad con el modo oscuro, mostrando visualmente la intensidad de los datos.

Abrir Vista previa

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

Componente Mapas de calor

Un componente de mapa de calor 3D receptivo con colores complementarios, adecuado para el blog y el consumo de contenido, con soporte para modo oscuro.

Abrir Vista previa

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

Componente Mapas de calor

Un componente de mapa de calor 3D con un esquema de color análogo, adecuado para una cartera. Es sensible y admite el modo oscuro.

Abrir Vista previa

                <div class="p-8 dark:bg-gray-900 min-h-screen">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2>
    
    <!-- Responsive Grid for Heat Map Squares -->
    <div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1">
      {[...Array(98)].map((_, i) => (
        <div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200"
             style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div>
      ))}
    </div>
    
    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project 1 -->
      <div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3>
        <p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md">
      </div>
      
      <!-- Project 2 -->
      <div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3>
        <p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md">
      </div>
    </div>

    <div class="mt-12 text-center">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg">
      <p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p>
      <p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p>
    </div>
  </div>
</div>

Componente Mapas de calor

Un componente de mapas de calor para el consumo de blog/contenido, con un diseño responsivo con soporte para modo oscuro. Utiliza un esquema de color en escala de grises y una complejidad media con funciones interactivas. Sin JavaScript, HTML puro con Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-8">Article Heatmap: Engagement Over Time</h1>

    <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
      <div class="grid grid-cols-1 md:grid-cols-7 gap-2">
        
        </div>

        <!-- Heatmap Grid -->
        <div class="col-span-full grid grid-cols-21 gap-1">
          <!-- Days of the week -->
          <div class="col-span-1"></div> <!-- Empty corner -->
          <div class="col-span-2 text-gray-400 text-xs text-center">Mon</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Tue</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Wed</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Thu</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Fri</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Sat</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Sun</div>

          <!-- Sample Heatmap Cells (dynamic content would go here) -->
          <!-- Weeks as rows -->
          {[...Array(5)].map((_, weekIndex) => (
            <> 
              <div class="col-span-1 text-gray-400 text-xs text-right pr-2">Week {weekIndex + 1}</div>
              {[...Array(20)].map((_, dayIndex) => (
                <div
                  key={dayIndex}
                  class={
                    `col-span-1 h-5 rounded-sm
                    ${dayIndex % 7 === 0 ? "bg-gray-900" : ""}
                    ${dayIndex % 7 === 1 ? "bg-gray-700" : ""}
                    ${dayIndex % 7 === 2 ? "bg-gray-600" : ""}
                    ${dayIndex % 7 === 3 ? "bg-gray-500" : ""}
                    ${dayIndex % 7 === 4 ? "bg-gray-400" : ""}
                    ${dayIndex % 7 === 5 ? "bg-gray-300" : ""}
                    ${dayIndex % 7 === 6 ? "bg-gray-200" : ""}
                    `
                  }
                  title="Engagement: X"
                ></div>
              ))}
            </>
          ))}
        </div>

        <!-- Color Key -->
        <div class="col-span-full flex justify-end items-center mt-4 text-gray-400 text-sm">
          Less
          <div class="flex ml-2">
            <div class="h-4 w-4 bg-gray-900 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-700 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-600 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-500 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-400 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-300 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-200 rounded-sm mr-1"></div>
          </div>
          More
        </div>
      </div>
    </div>

    <!-- Example Article List (for context) -->
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <h2 class="text-xl font-bold text-white mb-4">Top Articles This Week</h2>
      <ul class="divide-y divide-gray-700">
        <li class="py-3 flex items-center">
          <img src="https://picsum.photos/id/101/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
          <div>
            <p class="text-white font-semibold">The Future of AI in Content Creation</p>
            <p class="text-gray-400 text-sm">2,345 views - 12 comments</p>
          </div>
        </li>
        <li class="py-3 flex items-center">
          <img src="https://picsum.photos/id/102/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
          <div>
            <p class="text-white font-semibold">Understanding SEO: A Comprehensive Guide</p>
            <p class="text-gray-400 text-sm">1,876 views - 8 comments</p>
          </div>
        </li>
        <li class="py-3 flex items-center">
          <img src="https://picsum.photos/id/103/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
          <div>
            <p class="text-white font-semibold">Mastering Responsive Web Design</p>
            <p class="text-gray-400 text-sm">1,502 views - 5 comments</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Componente Mapas de calor

Un componente de mapas de calor responsivo con estilo de cristal, combinación de colores análoga y complejidad moderada para un portafolio, con soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition-all duration-300">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Activity Heatmap</h2>
      <div class="grid grid-cols-7 gap-1 text-center text-sm text-gray-600 dark:text-gray-300 mb-2">
        <span>Mon</span>
        <span>Tue</span>
        <span>Wed</span>
        <span>Thu</span>
        <span>Fri</span>
        <span>Sat</span>
        <span>Sun</span>
      </div>
      <div class="grid grid-cols-7 gap-1">
        <!-- Loop for weeks -->
        {[...Array(4)].map((_, weekIndex) => (
          // Loop for days
          [...Array(7)].map((_, dayIndex) => {
            const intensity = Math.floor(Math.random() * 5); // 0-4 for intensity
            const colors = [
              "bg-purple-200 dark:bg-purple-800",
              "bg-purple-300 dark:bg-purple-700",
              "bg-purple-400 dark:bg-purple-600",
              "bg-purple-500 dark:bg-purple-500",
              "bg-purple-600 dark:bg-purple-400"
            ];
            return (
              <div
                key={`${weekIndex}-${dayIndex}`}
                class={`h-8 w-full rounded-sm ${colors[intensity]} transform hover:scale-105 transition-transform duration-200 cursor-pointer`}
                title={`Day ${dayIndex + 1}, Week ${weekIndex + 1}: Intensity ${intensity}`}
              ></div>
            );
          })
        ))}
      </div>
      <div class="flex justify-between items-center mt-6 text-gray-600 dark:text-gray-300 text-sm">
        <span>Less</span>
        <div class="flex space-x-1">
          <div class="h-4 w-4 bg-purple-200 dark:bg-purple-800 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-300 dark:bg-purple-700 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-400 dark:bg-purple-600 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-500 dark:bg-purple-500 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-600 dark:bg-purple-400 rounded-sm"></div>
        </div>
        <span>More</span>
      </div>
    </div>
  </div>
</div>

Componente Mapas de calor

Un componente de mapas de calor responsivo con soporte para temas oscuros, construido con Tailwind CSS. Presenta un diseño simple con elementos mínimos, adecuado para un blog o consumo de contenido.

Abrir Vista previa

                <div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4">
  <div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Heat Map: Content Engagement</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">Visualizing user engagement across different content pieces.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Heat Map Item 1 -->
      <div class="bg-blue-100 dark:bg-blue-900 p-4 rounded-lg shadow-sm">
        <h3 class="font-semibold text-blue-800 dark:text-blue-200 mb-2">Article: Dark Mode Benefits</h3>
        <div class="grid grid-rows-3 grid-flow-col gap-1">
          <div class="bg-blue-300 dark:bg-blue-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">85%</div>
          <div class="bg-blue-400 dark:bg-blue-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">92%</div>
          <div class="bg-blue-500 dark:bg-blue-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">78%</div>
          <div class="bg-blue-300 dark:bg-blue-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">65%</div>
          <div class="bg-blue-400 dark:bg-blue-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-blue-900 dark:text-blue-100">70%</div>
        </div>
        <p class="text-sm text-blue-700 dark:text-blue-300 mt-2">Engagement: High</p>
      </div>

      <!-- Heat Map Item 2 -->
      <div class="bg-green-100 dark:bg-green-900 p-4 rounded-lg shadow-sm">
        <h3 class="font-semibold text-green-800 dark:text-green-200 mb-2">Guide: Tailwind CSS Basics</h3>
        <div class="grid grid-rows-3 grid-flow-col gap-1">
          <div class="bg-green-300 dark:bg-green-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">70%</div>
          <div class="bg-green-400 dark:bg-green-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">80%</div>
          <div class="bg-green-500 dark:bg-green-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">75%</div>
          <div class="bg-green-300 dark:bg-green-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">55%</div>
          <div class="bg-green-400 dark:bg-green-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-green-900 dark:text-green-100">60%</div>
        </div>
        <p class="text-sm text-green-700 dark:text-green-300 mt-2">Engagement: Medium</p>
      </div>

      <!-- Heat Map Item 3 -->
      <div class="bg-red-100 dark:bg-red-900 p-4 rounded-lg shadow-sm">
        <h3 class="font-semibold text-red-800 dark:text-red-200 mb-2">Post: Web Design Trends</h3>
        <div class="grid grid-rows-3 grid-flow-col gap-1">
          <div class="bg-red-300 dark:bg-red-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">40%</div>
          <div class="bg-red-400 dark:bg-red-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">50%</div>
          <div class="bg-red-500 dark:bg-red-500 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">35%</div>
          <div class="bg-red-300 dark:bg-red-700 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">25%</div>
          <div class="bg-red-400 dark:bg-red-600 w-10 h-10 rounded-sm flex items-center justify-center text-sm font-medium text-red-900 dark:text-red-100">30%</div>
        </div>
        <p class="text-sm text-red-700 dark:text-red-300 mt-2">Engagement: Low</p>
      </div>
    </div>
  </div>
</div>

Componente Mapas de calor

Un componente de mapa de calor responsivo para redes sociales con diseño de Skeuomorphism, colores complementarios y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir Vista previa

                <div class="p-4 md:p-8 dark:bg-gray-900 min-h-screen">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-4 border-gray-200 dark:border-gray-700 p-6 md:p-8">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center drop-shadow-md">
      Social Media Engagement Heat Map
    </h2>
    <div class="grid grid-cols-7 gap-2 md:gap-4 mb-4 text-sm font-semibold text-gray-600 dark:text-gray-300 text-center">
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
      <div>Sun</div>
    </div>
    <div class="grid grid-cols-7 gap-2 md:gap-4">
      <!-- Example Heat Map Cells (adjust as needed) -->
      
      <!-- Week 1 -->
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-green-300 to-green-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-green-600 dark:to-green-800 border-2 border-green-600 dark:border-green-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">15</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-yellow-600 dark:to-yellow-800 border-2 border-yellow-600 dark:border-yellow-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">25</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-orange-600 dark:to-orange-800 border-2 border-orange-600 dark:border-orange-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">35</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-red-300 to-red-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-red-600 dark:to-red-800 border-2 border-red-600 dark:border-red-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">45</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-purple-600 dark:to-purple-800 border-2 border-purple-600 dark:border-purple-300 " style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">55</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-blue-600 dark:to-blue-800 border-2 border-blue-600 dark:border-blue-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">65</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-indigo-600 dark:to-indigo-800 border-2 border-indigo-600 dark:border-indigo-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">75</span>
      </div>

      <!-- Week 2 - More cells as needed -->
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-green-300 to-green-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-green-600 dark:to-green-800 border-2 border-green-600 dark:border-green-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">20</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-blue-600 dark:to-blue-800 border-2 border-blue-600 dark:border-blue-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">30</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-red-300 to-red-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-red-600 dark:to-red-800 border-2 border-red-600 dark:border-red-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">50</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-yellow-600 dark:to-yellow-800 border-2 border-yellow-600 dark:border-yellow-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">40</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-indigo-600 dark:to-indigo-800 border-2 border-indigo-600 dark:border-indigo-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">60</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-orange-600 dark:to-orange-800 border-2 border-orange-600 dark:border-orange-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">70</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-purple-600 dark:to-purple-800 border-2 border-purple-600 dark:border-purple-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">80</span>
      </div>
    </div>
    
    <div class="mt-8 text-center">
      <p class="text-gray-700 dark:text-gray-300 text-sm md:text-base">Engagement levels tend to be higher on <span class="font-bold text-red-500 dark:text-red-400">Thursdays</span> and <span class="font-bold text-blue-500 dark:text-blue-400">Sundays</span>.</p>
    </div>

  </div>
</div>

Componente Mapas de calor

Un componente de mapas de calor en modo oscuro receptivo para la visualización de datos en un tablero, utilizando un esquema de color triádico.

Abrir Vista previa

                <div class="bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-white mb-4">Heat Maps Component</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-blue-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-blue-700">
            <h3 class="text-lg font-semibold text-white">Category 1</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded mt-2" />
            <p class="text-white mt-2">Heat Level: High</p>
        </div>
        <div class="bg-orange-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-orange-700">
            <h3 class="text-lg font-semibold text-white">Category 2</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="rounded mt-2" />
            <p class="text-white mt-2">Heat Level: Medium</p>
        </div>
        <div class="bg-green-500 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105 dark:bg-green-700">
            <h3 class="text-lg font-semibold text-white">Category 3</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="rounded mt-2" />
            <p class="text-white mt-2">Heat Level: Low</p>
        </div>
    </div>
    <footer class="mt-6 text-center">
        <p class="text-gray-400">Data visualizations based on real-time data</p>
        <div class="flex justify-center mt-4 space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
        </div>
    </footer>
</div>

Componente Mapas de calor

Un componente de mapas de calor responsivo diseñado con morfismo de vidrio y un esquema de color análogo para interfaces de redes sociales.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white text-center mb-4">Heat Maps Overview</h2>
    <div class="grid grid-cols-2 gap-2">
      <div class="p-4 bg-red-200 rounded-lg dark:bg-red-600 flex items-center justify-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
        <p class="text-gray-800 dark:text-white ml-2">John Doe</p>
      </div>
      <div class="p-4 bg-green-200 rounded-lg dark:bg-green-600 flex items-center justify-center">
        <img src="https://picsum.photos/100/100?random=2" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
        <p class="text-gray-800 dark:text-white ml-2">Jane Smith</p>
      </div>
      <div class="p-4 bg-blue-200 rounded-lg dark:bg-blue-600 flex items-center justify-center">
        <img src="https://picsum.photos/100/100?random=3" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
        <p class="text-gray-800 dark:text-white ml-2">Alice Johnson</p>
      </div>
      <div class="p-4 bg-yellow-200 rounded-lg dark:bg-yellow-600 flex items-center justify-center">
        <img src="https://picsum.photos/100/100?random=4" alt="Sample Image" class="rounded-full border-2 border-white dark:border-gray-900">
        <p class="text-gray-800 dark:text-white ml-2">Bob Lee</p>
      </div>
    </div>
  </div>
</div>