CCHub Logo CCHub Tailwind Collection
구성 요소 히트 맵 Heat Map E-commerce 구성 요소

Heat Map E-commerce 구성 요소

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

미리 보기

HTML 코드 

<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 구성 요소

Tailwind CSS를 사용하여 다크 모드용으로 스타일링된 반응형 히트 맵 구성 요소로, 임의의 자리 표시자 이미지와 사용자 아바타가 특징입니다.

열다

히트 맵 구성 요소 18

고대비의 브루탈리즘(Brutalism) 스타일로 디자인된 반응형 히트 맵 구성 요소로, 자리 표시자 이미지와 아바타가 다크 모드를 지원합니다.

열다

히트 맵 구성 요소 42

Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 히트 맵 구성 요소로, 다크 모드를 지원하며 임의의 이미지와 아바타를 제공합니다.

열다