Componente 3 del reproductor de vídeo

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl p-6 w-full max-w-md">
        <div class="video-container rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/600/400?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
            <div class="play-button bg-gray-300 dark:bg-gray-700 rounded-full p-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.4 3.24a1 1 0 01-1.552-.832V9.664a1 1 0 011.552-.832l5.4 3.24a1 1 0 010 1.664z" />
                </svg>
            </div>
        </div>
        <div class="mt-4 text-gray-800 dark:text-gray-200 text-lg font-semibold">Video Title</div>
        <div class="text-gray-600 dark:text-gray-400">Video description goes here. This is a brief overview of the content of the video.</div>
        <div class="flex items-center justify-between mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
            <div class="text-gray-600 dark:text-gray-400">10:30</div>
        </div>
    </div>
</div>