CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 Content Display 구성 요소

Content Display 구성 요소

어두운 테마의 전자 상거래를 위해 스큐어모픽 스타일로 설계된 Content Display Component입니다. 유쾌한 미학을 위해 유사한 색 구성표를 사용하여 최소한의 요소로 제품을 선보입니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

관련 구성 요소

부동산 리스팅 카드 - Swiss Pastel

스위스/인터내셔널 타이포그래피 스타일과 파스텔 색상 구성표가 있는 간단하고 깨끗하며 반응이 빠른 부동산 리스팅 카드로 부동산 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Pastel3DBlogContentCard

블로그 또는 콘텐츠 섹션을 위한 반응형 콘텐츠 표시 구성 요소로, Tailwind CSS로 설계되었습니다. 그림자와 호버 효과를 사용하여 3D에서 영감을 받은 미학을 가진 간단한 레이아웃이 특징입니다. 색 구성표는 밝은 모드의 경우 부드러운 파스텔이며 호환되는 어두운 모드 테마가 있습니다. 구성 요소에는 이미지, 제목, 메타데이터(작성자/날짜), 발췌문 및 '자세히 읽기' 버튼이 포함됩니다. 자리 표시자 이미지는 picsum.photos 및 randomuser.me 에서 사용됩니다.

열다

Content Display Components 컴포넌트

glassmorphism 효과, 어두운 테마 지원 및 보색 구성표를 갖춘 간단하고 반응형 콘텐츠 표시 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다.

열다