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

제품 카드 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Skeuomorphic Analogous Job Card 컴포넌트

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

열다

ArtDeco_ProductCards_Music

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

열다

제품 카드 구성 요소

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

열다