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

Heat Maps 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=1" alt="Heat Map 1">
            <p class="mt-2">Heat Map 1</p>
            <p class="text-sm text-gray-400">Description of heat map 1.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=2" alt="Heat Map 2">
            <p class="mt-2">Heat Map 2</p>
            <p class="text-sm text-gray-400">Description of heat map 2.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=3" alt="Heat Map 3">
            <p class="mt-2">Heat Map 3</p>
            <p class="text-sm text-gray-400">Description of heat map 3.</p>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 transition-transform hover:scale-105">
            <img class="rounded-md" src="https://picsum.photos/200?random=4" alt="Heat Map 4">
            <p class="mt-2">Heat Map 4</p>
            <p class="text-sm text-gray-400">Description of heat map 4.</p>
        </div>
    </div>
    <h3 class="mt-8 text-xl font-semibold">User Insights</h3>
    <div class="mt-4 flex flex-wrap gap-4">
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1">
            <div class="ml-3">
                <p class="font-medium">User 1</p>
                <p class="text-sm text-gray-400">Active in heat map 1.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2">
            <div class="ml-3">
                <p class="font-medium">User 2</p>
                <p class="text-sm text-gray-400">Active in heat map 2.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3">
            <div class="ml-3">
                <p class="font-medium">User 3</p>
                <p class="text-sm text-gray-400">Active in heat map 3.</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4 flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4">
            <div class="ml-3">
                <p class="font-medium">User 4</p>
                <p class="text-sm text-gray-400">Active in heat map 4.</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Heat Maps 구성 요소

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

열다

Neumorphic Heat Map 컴포넌트

트라이어딕 색 구성표가 있는 반응형 뉴모픽 히트 맵 구성 요소로, 비즈니스 및 기업 웹 사이트를 위해 설계되었습니다. 부드러운 그림자와 다크 모드 지원이 특징이며 데이터 강도를 시각적으로 표시합니다.

열다

Heat Map E-commerce 구성 요소

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

열다