Heatmaps

Heatmaps-Komponente

Eine Heatmaps-Komponente für den Konsum von Blogs/Inhalten mit einem responsiven Design mit Unterstützung für den Dunkelmodus. Nutzt Graustufen-Farbschema und mittlere Komplexität mit interaktiven Funktionen. Kein JavaScript, reines HTML mit Tailwind CSS.

Vorschau öffnen

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

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente mit Glassmorphism-Stil, analogem Farbschema und moderater Komplexität für ein Portfolio mit Unterstützung für dunkle Themen.

Vorschau öffnen

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

Heatmaps-Komponente

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

Vorschau öffnen

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

Heatmaps-Komponente

Eine reaktionsschnelle Heatmap-Komponente für soziale Medien mit Skeuomorphismus-Design, Komplementärfarben und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau öffnen

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

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente im Dunkelmodus für die Datenvisualisierung auf einem Dashboard unter Verwendung eines triadischen Farbschemas.

Vorschau öffnen

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

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente, die mit Glasmorphismus und einem analogen Farbschema für Social-Media-Schnittstellen entwickelt wurde.

Vorschau öffnen

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

Heatmaps-Komponente

Eine Heatmaps-Komponente, die im Glasmorphismus-Stil mit Erdtönen entworfen wurde. Das Layout ist einfach, besteht aus grundlegenden Elementen, die für den geschäftlichen Gebrauch gedacht sind, und unterstützt den Dunkelmodus.

Vorschau öffnen

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

Heatmap-Komponente für den E-Commerce

Eine minimalistische Graustufen-Heatmap-Komponente für den E-Commerce mit einem komplexen, interaktiven Design. Reaktionsschnell und unterstützt den Dunkelmodus.

Vorschau öffnen

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

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente mit Retro-/Vintage-Ästhetik, die für Blog-/Content-Zwecke entwickelt wurde, mit interaktiven Elementen und Unterstützung für dunkle Themen.

Vorschau öffnen

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

Heatmaps-Komponente

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

Vorschau öffnen

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

Kategorien