미디어 임베드 컴포넌트

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>

관련 구성 요소

미디어 임베드 컴포넌트

블로그를 위한 잔인하고 생동감 넘치며 복잡한 미디어 임베드 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드 지원으로 구축되었습니다.

열다

미디어 임베드 컴포넌트

블로그 및 콘텐츠 소비에 적합한 Neumorphism 스타일의 미디어 포함 구성 요소로, 트라이어딕 색 구성표를 특징으로 합니다. 다크 모드를 지원하는 반응형 디자인.

열다

레트로 미디어 임베드 컴포넌트

오래된 CRT 모니터 및 VCR 플레이어와 같은 80/90년대 미학에서 영감을 받은 "레트로/빈티지" 디자인의 반응형 미디어 임베드 구성 요소입니다. 슬레이트 그레이 베이스에 청록색과 주황색의 보색 구성표를 사용하여 "비즈니스/기업" 웹사이트에 적합합니다. 이 구성 요소는 재생 버튼 및 미디어 썸네일에 대한 호버 효과, 가짜 REC 조명 애니메이션 및 장식용 비기능 제어 요소가 있는 중간 정도의 복잡성을 특징으로 합니다. 여기에는 Tailwind의 'dark:' 접두사를 사용하는 어두운 테마 지원이 포함됩니다. 미디어 영역은 16:9 종횡비로 설계되었습니다(Tailwind 종횡비 플러그인 또는 패딩 하단 트릭과 같은 CSS 대체 필요). picsum.photos의 자리 표시자 이미지가 사용됩니다.

열다