Eコマースヒートマップコンポーネント - 水彩ネオン

<div class="bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans antialiased">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-400 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-200 mb-8 text-center drop-shadow-lg leading-tight">
    Product Interest Heatmap
  </h2>
  <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-2xl mx-auto opacity-90">
    Visualize customer engagement and popular items with this artistic heatmap of product categories. Each 'glow' represents a higher level of user interaction.
  </p>

  <!-- Heatmap Grid Container -->
  <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 p-4 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-800 dark:to-gray-950 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden relative border border-purple-200 dark:border-indigo-700">

    <!-- Background artistic elements (optional, can be simplified for pure Tailwind) -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <filter id="watercolorBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
          </filter>
        </defs>
        <circle cx="10" cy="10" r="8" fill="#f06" filter="url(#watercolorBlur)" />
        <circle cx="90" cy="20" r="12" fill="#0cf" filter="url(#watercolorBlur)" />
        <circle cx="30" cy="80" r="10" fill="#6f0" filter="url(#watercolorBlur)" />
        <circle cx="70" cy="90" r="15" fill="#ff0" filter="url(#watercolorBlur)" />
      </svg>
    </div>

    <!-- Individual Heatmap Cells -->
    <!-- Cell 1: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-pink-300 dark:hover:border-pink-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-60 group-hover:opacity-80"
        style="box-shadow: 0 0 40px #ff00ff, 0 0 80px #ff00ff;"></div>
      <img src="https://picsum.photos/seed/heatmap1/300/200" alt="Electronics" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-pink-300 dark:border-pink-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Electronics</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">12,000+ views</p>
    </div>

    <!-- Cell 2: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-lime-200 dark:hover:border-lime-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-40 group-hover:opacity-60"
        style="box-shadow: 0 0 30px #00ff00, 0 0 60px #00ff00;"></div>
      <img src="https://picsum.photos/seed/heatmap2/300/200" alt="Apparel" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-lime-300 dark:border-lime-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Apparel</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">8,900+ views</p>
    </div>

    <!-- Cell 3: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-blue-300 dark:hover:border-blue-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-70 group-hover:opacity-90"
        style="box-shadow: 0 0 50px #00bfff, 0 0 100px #00bfff;"></div>
      <img src="https://picsum.photos/seed/heatmap3/300/200" alt="Home Goods" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-blue-300 dark:border-blue-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Home Goods</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">15,500+ views</p>
    </div>

    <!-- Cell 4: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-purple-300 dark:hover:border-purple-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-50 group-hover:opacity-70"
        style="box-shadow: 0 0 35px #8a2be2, 0 0 70px #8a2be2;"></div>
      <img src="https://picsum.photos/seed/heatmap4/300/200" alt="Books & Media" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-purple-300 dark:border-purple-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Books & Media</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">9,800+ views</p>
    </div>

    <!-- Cell 5: Low Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-yellow-200 dark:hover:border-yellow-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-20 group-hover:opacity-40"
        style="box-shadow: 0 0 20px #ffff00, 0 0 40px #ffff00;"></div>
      <img src="https://picsum.photos/seed/heatmap5/300/200" alt="Sports Gear" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-yellow-300 dark:border-yellow-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Sports Gear</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">4,100+ views</p>
    </div>

    <!-- Cell 6: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-rose-300 dark:hover:border-rose-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-65 group-hover:opacity-85"
        style="box-shadow: 0 0 45px #ff1493, 0 0 90px #ff1493;"></div>
      <img src="https://picsum.photos/seed/heatmap6/300/200" alt="Beauty Products" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-rose-300 dark:border-rose-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Beauty Products</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">11,200+ views</p>
    </div>

    <!-- Cell 7: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-cyan-300 dark:hover:border-cyan-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-45 group-hover:opacity-65"
        style="box-shadow: 0 0 32px #00ffff, 0 0 64px #00ffff;"></div>
      <img src="https://picsum.photos/seed/heatmap7/300/200" alt="Kids & Toys" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-cyan-300 dark:border-cyan-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Kids & Toys</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">7,500+ views</p>
    </div>

    <!-- Cell 8: Low Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-emerald-200 dark:hover:border-emerald-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-25 group-hover:opacity-45"
        style="box-shadow: 0 0 25px #3cb371, 0 0 50px #3cb371;"></div>
      <img src="https://picsum.photos/seed/heatmap8/300/200" alt="Pet Supplies" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-emerald-300 dark:border-emerald-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Pet Supplies</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">3,200+ views</p>
    </div>

  </div>
</div>