Glassmorphic 미디어 컴포넌트
Tailwind CSS로 제작된 glassmorphism 디자인(젖빛 유리 효과)이 있는 반응형 미디어 카드 구성 요소입니다. 호버로 표시되는 재생 아이콘이 있는 이미지 자리 표시자(picsum.photos), 텍스트 콘텐츠, 아바타가 있는 작성자 섹션(randomuser.me 에서) 및 작업 버튼이 있습니다. 이 구성 요소는 Tailwind CSS 'dark:' 변형을 사용하여 다크 모드를 지원하며 다양한 화면 크기에 반응합니다. JavaScript가 필요하지 않습니다. 최적의 시각 효과를 얻으려면 이 구성 요소를 대비되는 배경에 배치하십시오. 다크 모드 기능은 적절한 Tailwind CSS 구성(예: tailwind.config.js의 'darkMode: "class"')을 가정합니다.
HTML 코드
<div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
<!-- Image -->
<div class="relative">
<img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
<div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
<svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Content Area -->
<div class="p-5 sm:p-6">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
Glassmorphic Media Showcase
</h2>
<p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
</p>
<!-- Author/Meta Info -->
<div class="flex items-center space-x-3 mt-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
<div>
<p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
<p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
<button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium
bg-indigo-600 hover:bg-indigo-700 text-white
dark:bg-indigo-500 dark:hover:bg-indigo-600
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30
transition-all duration-200">
View Details
</button>
<button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium
bg-white/50 hover:bg-white/70 text-slate-700
dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200
border border-white/60 dark:border-slate-600/60
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30
transition-all duration-200">
Bookmark
</button>
</div>
</div>
</div>관련 구성 요소
미디어 컴포넌트 컴포넌트
브루탈리즘 디자인, 생생한 색상, 대시보드의 복잡한 레이아웃을 갖춘 반응형 미디어 구성 요소 구성 요소로, 어두운 테마를 지원하고 JavaScript를 사용하지 않습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
미디어 컴포넌트 컴포넌트
블로그 콘텐츠 소비를 위한 복잡하고 반응이 빠른 미디어 구성 요소로, 단색 색 구성표로 어두운 모드로 스타일링됩니다. 여기에는 이미지, 제목, 설명 및 작성자 아바타가 포함됩니다.