CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 SimpleContent디스플레이

SimpleContent디스플레이

반응형 디자인과 Tailwind CSS를 사용하는 어두운 테마를 지원하는 간단한 콘텐츠 표시 구성 요소입니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 max-w-sm">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/123/400/300" alt="Placeholder image">
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Article Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">This is a brief description of the article content. It provides a sneak peek into what the user can expect to read.</p>
      <div class="flex items-center mt-4">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author avatar">
        <span class="text-gray-700 dark:text-gray-400 text-sm">John Doe</span>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

콘텐츠 표시 구성 요소

전자 상거래를 위한 간단한 빈티지 스타일의 반응형 콘텐츠 디스플레이 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.

열다

Content Display Components 컴포넌트

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

열다

레트로 소셜 미디어 엽서

레트로/빈티지 80년대/90년대 미학을 가미한 반응형 소셜 미디어 엽서 구성 요소로, 푸시아 액센트가 있는 유사한 색 구성표(Sky, Teal, Purple)를 사용합니다. 다크 모드 지원 및 대화형 호버 효과가 특징입니다. 콘텐츠에는 사용자 아바타, 사용자 이름, 타임스탬프, 텍스트 게시물, 이미지 및 작업 버튼(예: 댓글, 공유)이 포함됩니다. Tailwind CSS로 제작되었습니다.

열다