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

미리 보기

HTML 코드

관련 구성 요소

Heat Maps 구성 요소

전자 상거래 히트 맵 구성 요소 - 수채화 네온

히트 맵 구성 요소 42