CCHub Logo CCHub Tailwind Collection
コンポーネント ビデオプレーヤー ビデオプレーヤー

ビデオプレーヤー

マテリアルデザインスタイル、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマをサポートするビデオプレーヤーコンポーネント。

プレビュー

HTMLコード 

<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800">
  <div class="relative">
    <img class="w-full" src="https://picsum.photos/600/400" alt="Video thumbnail">
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="text-white text-6xl">
        ▶
      </button>
    </div>
  </div>
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Video Title</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Video description goes here.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag1</span>
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag2</span>
  </div>
</div>

関連コンポーネント

ビデオプレーヤーコンポーネント

Tailwind CSS を使用して、Neumorphism スタイルで設計されたレスポンシブ ビデオ プレーヤー コンポーネント。微妙な影のあるダークモードをサポートしており、ソフトなUIの外観を提供します。

開ける

グラデーションレインボービデオプレーヤーコンポーネント

ダッシュボード用のすっきりとしたミニマリストのビデオプレーヤーコンポーネントで、グラデーションレインボーカラースキーム、レスポンシブデザイン、ダークモードのサポートが特徴で、スイス/インターナショナルタイポグラフィスタイルを体現しています。

開ける

不動産ビデオプレーヤーコンポーネント

不動産プラットフォーム向けの複雑でレスポンシブなビデオプレーヤーコンポーネントで、フォレスト/グリーンのカラーパレットを備えたマテリアルデザインの美学が特徴です。ビデオ コントロール、プロパティの詳細、プレイリストが含まれ、ダーク モードが完全にサポートされています。

開ける