Mapas de calor

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>

Componente Mapas de calor

Un componente de mapas de calor diseñado con estilo glassmorphism, con tonos tierra. El diseño es simple, consta de elementos básicos destinados a uso comercial / corporativo, y admite el modo oscuro.

Abrir vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
    <div class="max-w-lg w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-md bg-opacity-50 p-6">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Heat Map Visualization</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-6">Analyze your data trends with our intuitive heat maps.
        Explore insights in a visually appealing format using earth tones inspired by nature.</p>
        <div class="grid grid-cols-2 gap-4">
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region A</h3>
                <img src="https://picsum.photos/200/150?random=1" alt="Heat Map Region A" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region B</h3>
                <img src="https://picsum.photos/200/150?random=2" alt="Heat Map Region B" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region C</h3>
                <img src="https://picsum.photos/200/150?random=3" alt="Heat Map Region C" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region D</h3>
                <img src="https://picsum.photos/200/150?random=4" alt="Heat Map Region D" class="w-full h-auto rounded-lg">
            </div>
        </div>
    </div>
    <footer class="mt-8 text-gray-600 dark:text-gray-300">
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</div>

Componente de comercio electrónico de mapa de calor

Un componente minimalista de mapa de calor en escala de grises para comercio electrónico, con un diseño complejo e interactivo. Responsivo y admite el modo oscuro.

Abrir vista previa

                <div class="bg-white dark:bg-gray-900 p-4 shadow-md rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Product Activity Heat Map</h2>
  <div class="grid grid-cols-31 gap-1">
    <!-- Days of the week column -->
    <div class="col-span-1 flex flex-col justify-around">
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Mon</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Tue</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Wed</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Thu</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Fri</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sat</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sun</div>
    </div>
    <!-- Heat map grid -->
    <div class="col-span-30 grid grid-cols-30 gap-1">
      <!-- Placeholder for days of the month (simplified) -->
      <div class="col-span-30 grid grid-cols-30 gap-1">
        
        <!-- Example cells with varying intensity -->
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
         <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
         <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
      
        <!-- ... add more cells for the rest of the month ... -->
      </div>
    </div>
  </div>
</div>

Componente Mapas de calor

Un componente de mapas de calor receptivo con una estética retro / vintage, diseñado para fines de blog / contenido, con elementos interactivos y soporte para temas oscuros.

Abrir vista previa

                <div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
    <h2 class="text-3xl font-bold text-center mb-6">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4">
            <h3 class="text-xl font-semibold">Popular Topics</h3>
            <ul class="mt-2">
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 1 - <span class="font-medium">75%</span></li>
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 2 - <span class="font-medium">65%</span></li>
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 3 - <span class="font-medium">55%</span></li>
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 4 - <span class="font-medium">85%</span></li>
            </ul>
        </div>
        <div class="bg-gradient-to-r from-blue-400 to-green-400 rounded-lg p-4">
            <h3 class="text-xl font-semibold">Recent Reads</h3>
            <div class="flex flex-col space-y-4 mt-2">
                <div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
                    <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
                    <div>
                        <h4 class="text-lg font-medium">Article Title 1</h4>
                        <p class="text-sm text-gray-400">Author Name</p>
                    </div>
                </div>
                <div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
                    <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
                    <div>
                        <h4 class="text-lg font-medium">Article Title 2</h4>
                        <p class="text-sm text-gray-400">Author Name</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl font-bold text-center">Interactive Heat Map</h3>
        <div class="relative mt-4">
            <img src="https://picsum.photos/800/400" alt="Heat Map" class="w-full h-auto rounded-lg">
            <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-between items-center">
                <div class="p-2 bg-red-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
                    <p class="text-white font-semibold">High Interest</p>
                </div>
                <div class="p-2 bg-yellow-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
                    <p class="text-white font-semibold">Moderate Interest</p>
                </div>
                <div class="p-2 bg-green-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
                    <p class="text-white font-semibold">Low Interest</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Mapas de calor

Un componente de mapa de calor responsivo simple diseñado con una estética Retro / Vintage utilizando un esquema de color pastel, adecuado para tableros. Cuenta con soporte para temas oscuros con Tailwind CSS.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300">Heat Map</h2>

    <div class="mt-4 grid grid-cols-3 gap-2">
        <div class="bg-blue-300 dark:bg-blue-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/100/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-green-300 dark:bg-green-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/101/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-yellow-300 dark:bg-yellow-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/102/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-pink-300 dark:bg-pink-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/103/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-purple-300 dark:bg-purple-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/104/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-red-300 dark:bg-red-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/105/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
    </div>

    <div class="mt-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-4 border-white">
            <span class="ml-2 text-gray-700 dark:text-gray-300">User: John Doe</span>
        </div>
        <button class="bg-pink-500 dark:bg-pink-600 text-white font-semibold py-2 px-4 rounded">Action</button>
    </div>
</div>

Categorías