Image Carousel - Copy this React, Tailwind Component to your project

Generate a React component that displays a series of images horizontally with the following functionality: The images should scroll smoothly in a continuous, slow animation from left to right using CSS for performance optimization. When the user hovers over any image: A partially transparent green overlay should cover part of the image, leaving the image visible underneath. The green overlay should appear with a smooth fade in animation. Text should be displayed over the green overlay, describing the image. This text should appear after a slight delay, using a smooth fade in or slide up animation. An 'add' icon (a white plus sign inside a dark square) should appear in the top right corner of the green overlay, fading in after the text, with a slight delay. Clicking on the 'add' icon should: Zoom the image to the center of the screen. Darken the background with a semi transparent black overlay, keeping focus on the zoomed image. Use Tailwind CSS for styling and ensure the images are optimized using the loading="lazy" attribute. Replicate the visual structure and hover effect, as seen in the first image of the provided screenshot, where the green overlay and text appear, along with the plus sign for interaction.