CCHub Logo CCHub Tailwind Collection
구성 요소 히트 맵 Heat Maps 구성 요소

Heat Maps 구성 요소

미니멀한 디자인, 반응형 레이아웃 및 Tailwind CSS를 사용하는 어두운 테마를 지원하는 히트맵 구성 요소입니다. JavaScript는 포함되어 있지 않습니다. 다크 모드 스타일링에 CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1">
    </div>
    <!-- Days of the week -->
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sun</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Mon</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Tue</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Wed</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Thu</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Fri</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sat</div>

    <!-- Heatmap cells (example: 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      <div key={i} class="h-5 bg-gray-300 dark:bg-gray-700 rounded-sm"
           style={{ opacity: Math.random() * 0.8 + 0.2 }}>
      </div>
    ))}
  </div>
</div>

관련 구성 요소

히트 맵 구성 요소 42

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

열다

Heat Maps 구성 요소

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

열다

Heat Maps 구성 요소

레트로/빈티지 미학으로 디자인된 반응형 히트 맵 구성 요소이며 어두운 테마 지원을 통합합니다. 제목, 부제목, 열이 강조 표시된 영역이 있는 지도에 대한 섹션이 있으며, 향수를 불러일으키는 느낌을 주기 위해 추가 무작위 이미지와 아바타가 있습니다.

열다