카테고리

히트 맵

색상 강도를 사용한 데이터의 그래픽 표현

Heat Maps 구성 요소

Tailwind CSS로 스타일링된 반응형 히트 맵 구성 요소로, 자리 표시자 이미지와 아바타를 사용하여 마이크로 인터랙션 및 어두운 테마 지원을 제공합니다.

                <div class="max-w-4xl mx-auto px-4 py-8">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=1" alt="Heat Map 1">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Population Density</h3>
        <p class="text-gray-600 dark:text-gray-400">Visual representation of population density across regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=2" alt="Heat Map 2">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Traffic Patterns</h3>
        <p class="text-gray-600 dark:text-gray-400">Analyzing traffic flow across different times of the day.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=3" alt="Heat Map 3">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Heatmap</h3>
        <p class="text-gray-600 dark:text-gray-400">Distribution of sales revenue across various regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=4" alt="Heat Map 4">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
        <p class="text-gray-600 dark:text-gray-400">Tracking user interaction levels on the website.</p>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
    }
  }
</style>

히트 맵 구성 요소 42

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

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 px-4">
  <h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Heat Map Component</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
    <!-- Sample Heat Map Item -->
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=1" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 1</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: High</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=2" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 2</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Medium</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=3" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 3</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Low</p>
    </div>
    <!-- More heat map items can be added here -->
  </div>
</div>

히트 맵 구성 요소 18

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

미리보기 열기

                <div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region A</h3>
                <p>High Activity</p>
            </div>
        </div>
        <div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region B</h3>
                <p>Moderate Activity</p>
            </div>
        </div>
        <div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region C</h3>
                <p>Low Activity</p>
            </div>
        </div>
        <div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region D</h3>
                <p>Very Low Activity</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
        <div class="flex flex-wrap gap-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
        </div>
    </div>
</div>