CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 Content Display Components 컴포넌트

Content Display Components 컴포넌트

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

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-sm mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <img class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" src="https://picsum.photos/600/400" alt="Placeholder image">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 transform transition duration-500 hover:text-indigo-600 dark:hover:text-indigo-400">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4 transform transition duration-500 hover:translate-x-1">This is a description of the content. It is responsive and supports dark theme.</p>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 transform transition duration-500 hover:rotate-6" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of the author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none transform transition duration-500 hover:underline">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">7 min read</p>
          </div>
        </div>
        <button class="px-3 py-1 bg-indigo-500 text-white text-xs font-bold rounded hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 transform transition duration-500 hover:-translate-y-1">Read More</button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Skeuomorphic_Fashion_Card

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

열다

Memphis_Muted_Consulting_Content_Display

컨설팅/서비스를 위한 콘텐츠 디스플레이 구성 요소로, 차분한 색상과 기하학적 패턴이 있는 멤피스 디자인에서 영감을 받았습니다. 다크 모드 지원으로 반응형.

열다

레트로 소셜 미디어 엽서

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

열다