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

데이터 시각화 구성 요소

파스텔 색상 구성표가 있는 머티리얼 디자인 스타일로 설계된 반응형 데이터 시각화 구성 요소로, 다크 모드를 지원하는 포트폴리오 작업을 보여주는 데 적합합니다.

미리 보기

HTML 코드 

<div class="max-w-4xl mx-auto p-4">
    <h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

데이터 시각화 구성 요소

그리드 기반 레이아웃 및 깊이 효과와 같은 Material Design 원칙으로 설계된 반응형 데이터 시각화 구성 요소이며 어두운 테마를 지원합니다.

열다

Data Visualization Components 구성 요소

문서/위키 사이트를 위한 간단하고 깔끔하며 코드에서 영감을 받은 데이터 시각화 구성 요소로, 고정 폭 글꼴, 터미널 미학 및 세피아/갈색 색조를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.

열다

Social_Media_Dashboard

단색 머티리얼 디자인 미학을 갖춘 복잡한 소셜 미디어 대시보드 구성 요소로, 그리드 기반 레이아웃, 깊이 효과 및 다크 모드 지원을 통한 응답성을 특징으로 합니다. 소셜 네트워킹 인터페이스용으로 설계되었습니다.

열다