CCHub Logo CCHub Tailwind Collection
구성 요소 데이터 시각화 구성 요소 데이터 시각화 구성 요소

데이터 시각화 구성 요소

Tailwind CSS를 사용하여 브루탈리즘 스타일로 디자인된 데이터 시각화 구성 요소로, 반응형 레이아웃과 어두운 테마 지원을 제공합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Data Visualization</h2>
    <div class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0">
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Bar Chart</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Bar Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Pie Chart</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Pie Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
    </div>
    <div class="mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">User Statistics</h3>
        <div class="flex flex-wrap items-center space-x-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Art Deco Data Visualization 구성 요소

컨설팅 서비스를 위한 복잡하고 반응이 빠른 아르데코 스타일의 데이터 시각화 구성 요소로, 기하학적 패턴과 고급스러운 보라색/보라색 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

Data Visualization Components 구성 요소

전자 상거래를 위해 설계된 간단한 데이터 시각화 구성 요소로, 생생한 색상의 다크 모드 인터페이스를 특징으로 합니다.

열다

Sports_Fitness_Dashboard_Monospace

코드에서 영감을 받은 깔끔한 스포츠/피트니스 대시보드 구성 요소로, 고정 폭 글꼴, 터미널 미학, 바다/파란색 톤이 있습니다. 반응형 디자인, 다크 모드 지원, 스포츠 팀 및 피트니스 애플리케이션에 적합한 데이터 시각화 요소가 특징입니다.

열다