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

제품 카드 구성 요소

3D 요소와 생생한 색 구성표로 디자인된 반응형 제품 카드 구성 요소로, 블로그 및 콘텐츠 소비를 위한 어두운 테마를 통합합니다. 사용자 참여를 위한 대화형 요소와 함께 중간 정도의 복잡성을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
      <p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
      <p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
      <p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

제품 카드 구성 요소

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

열다

스큐어모픽 제품 카드

대시보드를 위한 스큐어모픽 제품 카드(Skeuomorphic Product Card) 구성 요소로, 그레이스케일, 중간 복잡성, 다크 모드로 반응하는 스타일로 스타일링됩니다.

열다

제품 카드 구성 요소

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

열다