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

미디어 임베드 컴포넌트

Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 대시보드용으로 설계된 미니멀리스트 미디어 임베드 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-xs mx-auto">
    <div class="relative overflow-hidden rounded-lg">
        <img src="https://picsum.photos/400/200" alt="Media" class="w-full h-48 object-cover rounded-lg">
    </div>
    <div class="mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300">
            <div class="ml-4">
                <h2 class="text-lg font-semibold dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the media content goes here.</p>
            </div>
        </div>
        <div class="mt-2">
            <button class="bg-gray-800 text-white py-1 px-3 rounded hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Action Button</button>
        </div>
    </div>
</div>

관련 구성 요소

미디어 임베드 컴포넌트

블로그/콘텐츠 사이트에 대한 어두운 테마를 지원하는 반응형 미디어 임베드 구성 요소로, 머티리얼 디자인 원칙, 트라이어딕 색 구성표 및 적당한 복잡성으로 스타일링되었습니다. 포함된 비디오 자리 표시자 및 관련 기사 링크가 포함되어 있습니다.

열다

미디어 임베드 컴포넌트 14

스큐어모픽 스타일로 디자인된 미디어 임베드 컴포넌트로, 반응형 효과와 어두운 테마를 지원합니다. 여기에는 이미지, 설명 및 사용자 아바타가 포함됩니다.

열다

미디어 임베드 컴포넌트

glassmorphism 효과로 디자인된 미디어 임베드 구성 요소로, 어두운 테마를 지원하는 비즈니스 웹 사이트에 적합한 반응형 디자인을 특징으로 합니다.

열다