Componente de reproductor de vídeo

<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>