CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 미디어 구성 요소 구성 요소 39

미디어 구성 요소 구성 요소 39

다크 모드 UI로 디자인된 미디어 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-bold">John Doe</h2>
            <p class="text-gray-400">Posted 2 hours ago</p>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/600/400" alt="Media Content">
    <h3 class="text-lg font-semibold mb-2">Amazing Scenery</h3>
    <p class="text-gray-300">This is a beautiful representation of nature that showcases the stunning landscapes we often take for granted.</p>
    <div class="mt-4 flex justify-between">
        <button class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-300">Like</button>
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Comment</button>
    </div>
</div>

관련 구성 요소

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

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

열다

스큐어모피즘 미디어 컴포넌트

스큐어모피즘에서 영감을 받은 미디어 컴포넌트는 단색 색 구성표와 복잡한 복잡성 수준을 사용하여 블로그/콘텐츠 목적에 맞게 조정되었습니다. 기능에는 반응형 디자인과 JavaScript 없이 어두운 테마 지원이 포함됩니다.

열다

예술적 사진 미디어 구성 요소

사진 포트폴리오를 위한 복잡하고 반응이 빠른 미디어 구성 요소로, 수채화/예술적 디자인 스타일과 레트로/빈티지 색상 팔레트를 특징으로 합니다. 여러 대화형 요소와 완전한 다크 모드 지원이 포함됩니다.

열다