Video Card - Copy this React, Tailwind Component to your project
I need a component which has an image of aspect ratio 16:9 and height of 200px. At the bottom of the image, there is time mentiones, like 2 out of 6m. This is the time left for the video progress. Below this time, there is a progress bar in red color which shows the progress of the video. On hovering over this image, it scales bigger. Also, one hovering, from the bottom of the image downwards, appears a div which has title and description and a black background. This div appears downwards from the bottom of the image in an animated way. If the image is not hovered over, the div will not display. Please correct this prompt and make it better. Create a component with an image of aspect ratio 16:9 and height of 200px. At the bottom of the image, overlay a time label showing the remaining video time in the format “2 out of 6m.” Below the time label, display a red progress bar representing the video’s current progress. When the image is hovered, it smoothly scales up with a zoom effect, and an animated footer appears sliding down from the bottom edge of the image. This footer, with a black background, contains the title and description of the video and remains hidden when the image is not hovered over.
