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

Content Display 구성 요소

반응형 콘텐츠 표시 구성 요소로, 사용자 작업에 초점을 맞춘 매력적인 애니메이션과 마이크로 상호 작용을 통합합니다. 여기에는 다크 모드에 대한 지원과 이미지 및 아바타에 대한 자리 표시자가 포함됩니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <div class="p-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
        <p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
    </div>
</div>

관련 구성 요소

Memphis_Content_Display_Component

엔터테인먼트/미디어 플랫폼을 위한 복잡하고 반응이 빠른 콘텐츠 디스플레이 구성 요소로, 흑백 색 구성표와 하나의 밝은 액센트 색상(자홍색)이 있는 Memphis Design 스타일을 특징으로 합니다. 다크 모드 지원 및 자리 표시자 이미지가 포함됩니다.

열다

Content Display Components 컴포넌트

비즈니스/기업 웹 사이트를 위해 설계된 반응형 콘텐츠 디스플레이 구성 요소로, 다크 모드를 지원하고 생생한 색 구성표를 제공합니다. 여기에는 사용자 아바타, 텍스트 콘텐츠 및 이미지에 대한 섹션이 포함됩니다.

열다

Content Display Components 컴포넌트

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

열다