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

Heat Maps 구성 요소

Tailwind CSS를 사용하여 고대비와 특이한 레이아웃을 특징으로 하는 브루탈리즘 스타일로 디자인된 히트 맵 컴포넌트입니다. 반응형 효과와 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">20%</div>
        </div>
        <div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-black font-bold text-lg">50%</div>
        </div>
        <div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">75%</div>
        </div>
        <div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">40%</div>
        </div>
        <div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">90%</div>
        </div>
        <div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">60%</div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
        </div>
    </div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>

관련 구성 요소

Heat Maps 구성 요소

개발자에서 영감을 받은 흙색의 히트 맵 구성 요소인 모노스페이스로, 컨설팅/서비스를 위해 설계되었습니다. 다양한 날짜의 히트 맵 데이터를 시뮬레이션하는 그리드형 디스플레이가 특징이며, 여러 장치에서 응답하고, 다크 모드를 지원합니다.

열다

Heat Maps 구성 요소

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

열다

Heat Maps 구성 요소

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

열다