CCHub Logo CCHub Tailwind Collection
구성 요소 카드 카드 구성 요소

카드 구성 요소

브루탈리즘 디자인 스타일의 반응형 포트폴리오 카드 구성 요소로, 파스텔 색 구성표와 인터랙티브 기능을 통해 적당한 복잡성을 활용합니다. 이 카드는 작업 또는 제품을 전시하고 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

전자 상거래 카드

Tailwind CSS 및 머티리얼 디자인 원칙을 사용하여 다크 모드를 지원하는 반응형 전자 상거래 카드 구성 요소. 버튼과 호버 효과와 같은 대화형 요소를 포함하여 중간 정도의 복잡성을 가진 생생한 색 구성표가 특징입니다. 그리드 기반 레이아웃을 사용하고 깊이를 위해 그림자를 통합합니다.

열다

스큐어모픽 카드 컴포넌트

스큐어모피즘(Skeuomorphism)에서 영감을 받은 다음 카드 컴포넌트는 다크 테마 지원으로 완벽하게 반응합니다. 다크 모드의 경우 CSS 지원으로 충분합니다. JavaScript가 필요하지 않습니다.

열다

스큐어모픽 카드 컴포넌트

스큐어모픽 스타일로 디자인된 간단한 카드 구성 요소로, 읽기 및 콘텐츠 소비를 위해 유사한 색 구성표를 사용합니다. 이 구성 요소는 반응형이며 어두운 테마를 지원합니다.

열다