CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 미디어 컴포넌트 컴포넌트

미디어 컴포넌트 컴포넌트

블로그 콘텐츠 소비를 위한 복잡하고 반응이 빠른 미디어 구성 요소로, 단색 색 구성표로 어두운 모드로 스타일링됩니다. 여기에는 이미지, 제목, 설명 및 작성자 아바타가 포함됩니다.

미리 보기

HTML 코드 

<div class="max-w-2xl mx-auto bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <img class="w-full h-48 rounded-lg object-cover mb-4" src="https://picsum.photos/800/400" alt="Media Content">
    <h2 class="text-2xl font-bold mb-2">Article Title</h2>
    <p class="text-gray-400 mb-4">This is a short description of the content that provides a brief overview of what the article is about.</p>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
        <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500">Published on January 1, 2023</p>
        </div>
    </div>
</div>

관련 구성 요소

Brutalism 파스텔 미디어 구성 요소

파스텔 색조의 단순하고 잔인한 미디어 구성 요소로, 블로그용으로 디자인되었습니다. 다크 모드 지원으로 반응형.

열다

Bauhaus 유사 미디어 구성 요소

Bauhaus에서 영감을 받은 디자인의 반응형 미디어 구성 요소로, 유사한 색 구성표를 사용하여 정부/공공 서비스 웹 사이트에 적합합니다. 기하학적 형태, 기본 유사 색상 및 다크 모드 지원이 특징입니다.

열다

머티리얼 디자인 블로그 카드

이미지, 제목, 발췌문 및 작성자 정보가 포함된 반응형 블로그 게시물 카드 구성 요소로, 따뜻한 일몰 톤의 머티리얼 디자인 스타일로 디자인되었습니다. 다크 모드 지원이 포함됩니다.

열다