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

제품 카드 구성 요소

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

미리 보기

HTML 코드 

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

ArtDeco_ProductCards_Music

아르데코 미학이 가미된 심플하고 반응형인 제품 카드 구성 요소는 기하학적 패턴과 일몰/따뜻한 색 구성표를 특징으로 하며 음악 및 오디오 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

제품 카드 구성 요소

브루탈리즘 스타일, 단색 색 구성표, 전자 상거래 목적을 위한 복잡한 복잡성 수준의 제품 카드 구성 요소.

열다

제품 카드 구성 요소

Tailwind CSS를 사용하는 소셜 미디어 인터페이스용으로 설계된 마이크로 인터랙션이 있는 간단한 반응형 제품 카드 구성 요소로, 어두운 테마와 회색조 색 구성표를 지원합니다.

열다