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>

관련 구성 요소

Data Visualization Components 구성 요소

블로그/콘텐츠에 대한 Glassmorphism 데이터 시각화 구성 요소

열다

Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component

데이트 및 소셜 플랫폼을 위해 설계된 우아하고 정교한 데이터 시각화 구성 요소로, 그레이스케일 색 구성표와 다크 모드를 지원하는 반응형 레이아웃을 특징으로 합니다. 사용자 통계 및 연결 메트릭을 표시합니다.

열다

E-commerce Data Visualization Components 구성 요소

전자상거래를 위한 데이터 시각화 구성요소로, 머티리얼 디자인 원칙, 흙빛 톤, Tailwind CSS를 사용한 반응형 다크 모드 지원으로 스타일이 지정되었습니다.

열다