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

Heat Maps 구성 요소

글래스모피즘 효과로 디자인된 반응형 히트 맵 구성 요소로, 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 활용하는 어두운 테마 스타일을 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Heat Map E-commerce 구성 요소

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

열다

Heat Maps 구성 요소

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

열다

Heat Maps 구성 요소

3D 디자인 스타일과 보색 구성표가 있는 간단한 반응형 히트 맵 구성 요소로, 어두운 테마를 지원하는 작업이나 제품을 보여주기 위해 설계되었습니다.

열다