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 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Heat Maps 구성 요소

Heat Maps 구성 요소

Neumorphism Vibrant Heat Maps 구성 요소