CCHub Logo CCHub Tailwind Collection
구성 요소 제품 카드 스큐어모픽 제품 카드

스큐어모픽 제품 카드

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

미리 보기

HTML 코드 

<div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
    <div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
  </div>
  <div class="p-4">
    <h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
    <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
    <div class="flex items-center justify-between">
      <span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
      <button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
    </div>
  </div>
</div>

관련 구성 요소

아르데코 캔디 제품 카드

아르데코에서 영감을 받은 디자인과 경쾌한 캔디 색상 구성표를 갖춘 반응형 제품 카드 구성 요소로 예약 및 예약 시스템에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

제품 카드 구성 요소

스큐어모피즘 디자인 스타일, 흙색 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 제품 카드 구성 요소로, 포트폴리오에 적합합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링에 Tailwind CSS를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다

ArtDeco_ProductCards_Music

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

열다