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를 사용하여 다크 모드를 지원하는 버튼이 포함됩니다.

열다

제품 카드 구성 요소

매력적인 마이크로 인터랙션과 단색 색 구성표를 특징으로 하는 복잡한 제품 카드 구성 요소입니다. 비즈니스 웹사이트용으로 설계되었으며 반응형이며 다크 모드를 지원합니다.

열다