Glassmorphic メディアコンポーネント
Tailwind CSS で構築された glassmorphism デザイン (すりガラス効果) のレスポンシブ メディア カード コンポーネント。ホバー表示の再生アイコン、テキストコンテンツ、アバター付きの作成者セクション(randomuser.me から)、アクションボタンを備えた画像プレースホルダー(picsum.photosから)を備えています。このコンポーネントは、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 を使用します。
製造用のGlassmorphismメディアコンポーネント
製造/産業アプリケーション向けに設計されたレスポンシブglassmorphismメディアコンポーネントで、つや消しの半透明要素、クールなニュートラルカラー、ダークモードのサポートが特徴です。