히트 맵

Heat Maps 구성 요소

블로그/콘텐츠 소비를 위한 히트 맵 컴포넌트로, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 그레이스케일 색 구성표와 대화형 기능을 통해 중간 복잡성을 활용합니다. 자바스크립트 없음, Tailwind CSS가 있는 순수 HTML.

미리보기 열기

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

Heat Maps 구성 요소

Glassmorphism 스타일, 유사한 색 구성표 및 포트폴리오에 대한 적당한 복잡성을 갖춘 반응형 Heat Maps 구성 요소이며 어두운 테마를 지원합니다.

미리보기 열기

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

Heat Maps 구성 요소

Tailwind CSS로 구축된 어두운 테마를 지원하는 반응형 히트 맵 컴포넌트입니다. 블로그나 콘텐츠 소비에 적합한 최소한의 요소가 포함된 간단한 레이아웃이 특징입니다.

미리보기 열기

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

Heat Maps 구성 요소

Tailwind CSS를 사용하여 Skeuomorphism 디자인, 보색 및 다크 모드를 지원하는 소셜 미디어용 반응형 히트 맵 구성 요소입니다.

미리보기 열기

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

Heat Maps 구성 요소

반응형 다크 모드 히트 맵 구성 요소는 트라이어딕 색 구성표를 사용하여 대시보드에서 데이터를 시각화합니다.

미리보기 열기

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

Heat Maps 구성 요소

glassmorphism으로 설계된 반응형 히트 맵 구성 요소와 소셜 미디어 인터페이스를 위한 유사한 색 구성표입니다.

미리보기 열기

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

Heat Maps 구성 요소

히트 맵 컴포넌트(Heat Maps Component)는 어스 톤을 특징으로 하는 glassmorphism 스타일로 디자인되었습니다. 레이아웃은 단순하고 비즈니스/기업용 기본 요소로 구성되며 다크 모드를 지원합니다.

미리보기 열기

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

Heat Map E-commerce 구성 요소

전자 상거래를 위한 미니멀한 그레이스케일 히트 맵 구성 요소로, 복잡한 인터랙티브 디자인이 특징입니다. 반응형이며 다크 모드를 지원합니다.

미리보기 열기

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

Heat Maps 구성 요소

레트로/빈티지 미학을 가미한 반응형 히트 맵 구성 요소로, 블로그/콘텐츠 목적으로 설계되었으며, 대화형 요소와 어두운 테마 지원을 특징으로 합니다.

미리보기 열기

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

Heat Maps 구성 요소

대시보드에 적합한 파스텔 색 구성표를 사용하여 레트로/빈티지 미학으로 설계된 간단한 반응형 히트 맵 구성 요소입니다. Tailwind CSS로 어두운 테마를 지원합니다.

미리보기 열기

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

카테고리