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

제품 카드 구성 요소

마이크로 상호 작용이 있는 반응형 제품 카드 구성 요소로, 회색조 색 구성표를 활용하고 어두운 모드를 지원합니다. 블로그 또는 콘텐츠 소비 목적에 적합합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center p-4">
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

제품 카드 구성 요소

그레이스케일 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 사용하여 Material Design 스타일로 디자인된 간단한 전자 상거래 제품 카드 구성 요소입니다.

열다

제품 카드 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 브루탈리즘 스타일의 제품 카드 구성 요소입니다.

열다

Skeuomorphic Analogous Job Card 컴포넌트

스큐어모픽 디자인 스타일의 반응형 작업 카드 구성 요소로, 유사한 색 구성표를 사용하여 구인 게시판 및 경력 개발 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다