미디어 임베드 컴포넌트 14
스큐어모픽 스타일로 디자인된 미디어 임베드 컴포넌트로, 반응형 효과와 어두운 테마를 지원합니다. 여기에는 이미지, 설명 및 사용자 아바타가 포함됩니다.
HTML 코드
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8"> <div class="relative"> <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/> <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2"> <span>Featured Media</span> </div> </div> <div class="mt-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2> <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p> </div> <div class="flex items-center mt-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/> <div class="ml-3"> <p class="text-gray-800 dark:text-white font-semibold">John Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p> </div> </div></div>관련 구성 요소
미디어 임베드 컴포넌트
Glassmorphism 디자인, 흙색 색상 및 다크 모드를 지원하는 반응형 미디어 임베드 구성 요소로, 소셜 미디어 사용 사례를 위해 Tailwind CSS로 구축되었습니다. 젖빛 유리 효과를 포함하고 자리 표시자 이미지/아바타를 사용합니다.
레트로 미디어 임베드 컴포넌트
오래된 CRT 모니터 및 VCR 플레이어와 같은 80/90년대 미학에서 영감을 받은 "레트로/빈티지" 디자인의 반응형 미디어 임베드 구성 요소입니다. 슬레이트 그레이 베이스에 청록색과 주황색의 보색 구성표를 사용하여 "비즈니스/기업" 웹사이트에 적합합니다. 이 구성 요소는 재생 버튼 및 미디어 썸네일에 대한 호버 효과, 가짜 REC 조명 애니메이션 및 장식용 비기능 제어 요소가 있는 중간 정도의 복잡성을 특징으로 합니다. 여기에는 Tailwind의 'dark:' 접두사를 사용하는 어두운 테마 지원이 포함됩니다. 미디어 영역은 16:9 종횡비로 설계되었습니다(Tailwind 종횡비 플러그인 또는 패딩 하단 트릭과 같은 CSS 대체 필요). picsum.photos의 자리 표시자 이미지가 사용됩니다.
미디어 임베드 컴포넌트
미니멀하고 평평한 디자인의 미디어 임베드 구성 요소는 비즈니스/기업 웹사이트에 적합한 흙색 색 구성표입니다. Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 중간 정도의 복잡성 구성 요소입니다. JavaScript는 포함되어 있지 않습니다.