ビデオプレーヤーコンポーネント
ブログやコンテンツの消費向けに設計されたレスポンシブビデオプレーヤーコンポーネントで、マイクロインタラクションとパステルカラースキームを備えています。再生/一時停止機能とボリュームコントロールが含まれています。このデザインには、ダークモードのサポートも含まれています。
HTMLコード
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/500/300" class="w-full h-48 object-cover" alt="Video Thumbnail">
<div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 p-2 flex items-center justify-between">
<span class="text-white">Video Title</span>
<div class="flex items-center">
<button class="text-white p-1 hover:bg-gray-700 rounded-md transition duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
</button>
<input type="range" class="ml-2 w-24 slider slider-dark dark:bg-gray-700" min="0" max="100" value="50">
</div>
</div>
</div>
<div class="p-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">User Name</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the video content. It provides insight into what the video is about and engages the user to watch the video.</p>
</div>
</div>