ビデオプレーヤーコンポーネント
glassmorphismでデザインされたビデオプレーヤーコンポーネントで、補色を持つすりガラスのような効果が特徴です。インタラクティブでレスポンシブで、ダークテーマをサポートするブログコンテンツの消費に適しています。
HTMLコード
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
<video class="w-full rounded-lg" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
<p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
</div>
<div class="flex items-center mt-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
</div>
</div>
</div>
</div>関連コンポーネント
ミニマリストビデオプレーヤー
Tailwind CSSを使用してHTMLでコード化されたビデオプレーヤーコンポーネント。ダッシュボードでの使用を目的とした、グレースケールの配色を使用したミニマリストデザインです。これは、複数のインタラクティブ要素を持つ複雑なコンポーネントであり、ダークモードのサポートにより完全にレスポンシブです。