CCHub Logo CCHub Tailwind Collection
コンポーネント メディアの埋め込み Retro Media Embed コンポーネント

Retro Media Embed コンポーネント

「レトロ/ビンテージ」デザインのレスポンシブメディアエンベッドコンポーネントで、古いCRTモニターやVCRプレーヤーなどの80年代/90年代の美学に触発されています。スレートグレーをベースにティールとオレンジの補色を使用し、「ビジネス/企業」のウェブサイトに適しています。このコンポーネントは、再生ボタンとメディアサムネイルのホバー効果、フェイクRECライトアニメーション、装飾的な非機能的なコントロール要素など、適度な複雑さを特徴としています。これには、Tailwindの「dark:」プレフィックスを使用したダークテーマのサポートが含まれています。メディアエリアは16:9のアスペクト比で設計されています(Tailwindアスペクト比プラグインまたはpadding-bottomトリックのようなCSSフォールバックが必要です)。picsum.photos のプレースホルダー画像が使用されます。

プレビュー

HTMLコード 

<div class="min-h-screen bg-slate-100 dark:bg-slate-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-xl rounded-lg shadow-2xl overflow-hidden border-2 border-slate-400 dark:border-slate-600">
    <!-- Outer Casing - Retro Monitor Look -->
    <div class="bg-slate-300 dark:bg-slate-700 p-2 border-b-2 border-slate-400 dark:border-slate-600">
      <div class="flex items-center space-x-1.5 pl-1">
        <span class="block w-3 h-3 bg-red-500 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-yellow-400 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-green-500 rounded-full opacity-80"></span>
      </div>
    </div>

    <div class="bg-slate-200 dark:bg-slate-800 p-1 sm:p-2">
      <!-- Screen Bezel -->
      <div class="bg-black p-1 sm:p-1.5 rounded-sm shadow-inner">
        <!-- Media Embed Area with Aspect Ratio (requires @tailwindcss/aspect-ratio plugin) -->
        <div class="aspect-w-16 aspect-h-9 relative group overflow-hidden">
          <img src="https://picsum.photos/seed/retrocorp1/1280/720" alt="Retro Media Thumbnail" class="absoluteിക inset-0 w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:opacity-75 filter grayscale group-hover:grayscale-0"/>
          
          <!-- Play Button Overlay -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out bg-black bg-opacity-30 group-hover:bg-opacity-40">
            <button aria-label="Play" class="flex items-center justify-center p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded-sm shadow-md transform transition-all duration-150 ease-in-out hover:scale-105 border-b-2 border-r-2 border-orange-700 dark:border-orange-500 hover:border-orange-600 dark:hover:border-orange-400 active:border-b-0 active:border-r-0 active:translate-x-px active:translate-y-px">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M6 19V5l14 7-14 7z"/>
              </svg>
              <span class="ml-2 text-sm sm:text-base font-semibold hidden md:inline">PLAY</span>
            </button>
          </div>
          
          <!-- Watermark/Branding (subtle, retro) -->
          <div class="absolute bottom-2 right-2 md:bottom-3 md:right-3 flex items-center">
            <span class=

関連コンポーネント

メディア埋め込みコンポーネント

グレースケール3Dデザインとダークモードをサポートするシンプルでレスポンシブなメディア埋め込みコンポーネントで、ビジネスWebサイトに適しています。スタイリングにはTailwind CSSを使用します。

開ける

メディア埋め込みコンポーネント

ニューモーフィズムスタイルで設計されたレスポンシブメディア埋め込みコンポーネントで、鮮やかな色とダッシュボードアプリケーションに適したインタラクティブインターフェイスが特徴です。

開ける

Neumorphism メディア埋め込みコンポーネント

ビジネス Web サイト用のニューモーフィック Media Embed コンポーネントで、レスポンシブ デザインと補色を使用したダーク テーマのサポートを備えています。

開ける