CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 콘텐츠 표시 구성 요소

콘텐츠 표시 구성 요소

그레이스케일 색 구성표와 반응형 디자인으로 작업 또는 제품을 선보이는 3D 디자인 포트폴리오로, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
    <h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </div>
    <footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your Name. All rights reserved.</p>
    </footer>
</div>

관련 구성 요소

Swiss_International_Typography_Content_Display_Component

대시보드를 위한 깨끗하고 미니멀한 콘텐츠 디스플레이 구성 요소로, 멋진 무채색과 완전한 응답성으로 타이포그래피와 그리드 시스템을 강조합니다.

열다

머티리얼 디자인 트라이어딕 대시보드 카드

Material Design 미학을 갖춘 간단하고 반응이 빠른 대시보드 콘텐츠 표시 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 사용합니다. 주요 메트릭 또는 정보를 표시하는 데 적합합니다.

열다

Content Display Components 컴포넌트

Tailwind CSS를 사용하여 마이크로 인터랙션, 반응형 디자인 및 어두운 테마를 지원하는 콘텐츠 표시 구성 요소입니다. 미묘한 Hover 효과를 제공하고 대화형 요소에 애니메이션을 집중시킵니다.

열다