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

Content Display 구성 요소

파스텔 색상 구성표로 어두운 모드 스타일로 작업이나 제품을 보여주기 위한 반응형 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-pink-300 dark:text-pink-200 mb-4">Project Title</h2>
  <img src="https://picsum.photos/400/200" alt="Project Image" class="rounded-lg mb-4 shadow-md">
  <p class="text-gray-300 dark:text-gray-200 mb-4">This is a brief description of the project. It showcases the unique features and the value it brings to users.</p>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2 shadow-lg">
    <span class="text-gray-400 dark:text-gray-200">Posted by John Doe</span>
  </div>
  <a href="#" class="inline-block bg-pink-500 hover:bg-pink-400 text-white font-semibold py-2 px-4 rounded mt-2">View More</a>
</div>

관련 구성 요소

Skeuomorphic_Fashion_Card

패션/뷰티 제품을 위한 간단하고 반응이 빠른 콘텐츠 디스플레이 카드로, 코퍼레이트 블루 톤을 사용하여 스큐어모픽 미학으로 디자인되었습니다. 다크 모드 지원이 포함됩니다.

열다

레트로 전자 상거래 제품 카드 디스플레이

80년대/90년대 레트로/빈티지 미학을 가미한 복잡하고 반응이 빠른 전자 상거래 제품 디스플레이 구성 요소로, 보라색/보라색 색 구성표, 대화형 요소 및 다크 모드 지원을 특징으로 합니다.

열다

Content Display Components 컴포넌트

Tailwind CSS를 사용하여 마이크로 인터랙션, 반응형 디자인 및 어두운 테마를 지원하는 콘텐츠 표시 구성 요소입니다. 미묘한 Hover 효과를 제공하고 대화형 요소에 애니메이션을 집중시킵니다.

열다