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

Eコマース用のミニマリスト/フラットデザインビデオプレーヤーコンポーネント、ダークテーマのサポートでレスポンシブ

プレビュー

HTMLコード

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="relative">
    <video controls class="w-full">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <div class="p-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">Brief product description goes here.</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-lg font-bold text-gray-900 dark:text-white">$99.99</span>
      <button class="px-3 py-1 bg-blue-500 text-white text-xs font-bold uppercase rounded dark:bg-blue-700">Add to Cart</button>
    </div>
  </div>
</div>

関連コンポーネント

Brutalist_RealEstate_VideoPlayer

不動産リスト用の複雑なブルータリズムスタイルのビデオプレーヤーコンポーネントで、ハイコントラスト、フォレスト/グリーンのカラーパレット、ダークモードをサポートするレスポンシブデザインが特徴です。プロパティの詳細、エージェント情報、およびアクションボタンが含まれます。

開ける

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

高コントラストで珍しいレイアウトのブルータリズムスタイルのビデオプレーヤーコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが特徴です。

開ける

ビデオプレーヤーコンポーネント - 水彩/芸術、オーシャン/ブルー、ヘルスケア

水彩画/芸術的なデザインスタイルとオーシャン/ブルーの配色を備えたシンプルでレスポンシブなビデオプレーヤーコンポーネントで、ヘルスケアおよび医療アプリケーションに適しています。ダークモードのサポートが含まれています。

開ける