CCHub Logo CCHub Tailwind Collection
コンポーネント メディアコンポーネント Glassmorphic メディアコンポーネント

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>

関連コンポーネント

メディアコンポーネントコンポーネント

補完的な配色、適度な複雑さ、ダークテーマのサポートを備えたソーシャルメディア用の3Dメディアコンポーネント。

開ける

Memphis_Media_Component_Educational

教育プラットフォーム向けのレスポンシブメディアコンポーネントで、大胆な色、幾何学的な形状、ネオン/エレクトリックの配色を使用してメンフィススタイルの美学で設計されています。ダークモードをサポートします。

開ける

メディアコンポーネントコンポーネント

ブルータリズムスタイルで設計されたメディアコンポーネントで、Tailwind CSSを使用したハイコントラスト、レスポンシブエフェクト、ダークテーマのサポートを備えた大胆なレイアウトを示しています。

開ける