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

Heat Maps 구성 요소

히트 맵 컴포넌트는 어스 톤, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인의 브루탈리즘 스타일로 디자인되었습니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
    <p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
        </div>
    </div>
</div>

관련 구성 요소

Heat Maps 구성 요소

레트로/빈티지 미학을 가미한 반응형 히트 맵 구성 요소로, 블로그/콘텐츠 목적으로 설계되었으며, 대화형 요소와 어두운 테마 지원을 특징으로 합니다.

열다

Heat Maps 구성 요소

블로그/콘텐츠 소비를 위한 히트 맵 컴포넌트로, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 그레이스케일 색 구성표와 대화형 기능을 통해 중간 복잡성을 활용합니다. 자바스크립트 없음, Tailwind CSS가 있는 순수 HTML.

열다

Heat Maps 구성 요소

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

열다