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

Heat Maps 구성 요소

Tailwind CSS를 사용하여 대화형 기능, 반응형 디자인 및 어두운 테마 지원을 갖춘 포트폴리오를 보여주는 미니멀리스트 히트 맵 구성 요소입니다.

미리 보기

HTML 코드 

<div class="max-w-4xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Example Heat Map Item -->
        <div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
        </div>
        <div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
        </div>
        <div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
        </div>
        <!-- Add more items as needed -->
    </div>
</div>

관련 구성 요소

Heat Maps 구성 요소

Tailwind CSS를 사용하여 Skeuomorphism 디자인, 보색 및 다크 모드를 지원하는 소셜 미디어용 반응형 히트 맵 구성 요소입니다.

열다

Heat Maps 구성 요소

Glassmorphism 스타일, 유사한 색 구성표 및 포트폴리오에 대한 적당한 복잡성을 갖춘 반응형 Heat Maps 구성 요소이며 어두운 테마를 지원합니다.

열다

Heat Maps 구성 요소

Tailwind CSS로 스타일링된 반응형 히트 맵 구성 요소로, 자리 표시자 이미지와 아바타를 사용하여 마이크로 인터랙션 및 어두운 테마 지원을 제공합니다.

열다