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

Prompt: Carousel Interactions and Hover Effects in a Netflix like Interface When a user hovers over an item in the carousel of a Netflix like interface, the following detailed interactions and behaviors should occur: 1. Hover Effects on Carousel Items: Visual Highlighting: The hovered item should display a slight zoom in effect, making it appear more prominent. A subtle shadow effect can be added to create depth and draw attention to the item. Overlay with Title and Actions: An overlay should appear on the item when hovered, featuring: The title of the content prominently displayed at the center or bottom of the item. A brief tagline or description that provides additional context (optional). Below the title, include two primary action buttons: "Play Now": A button that, when clicked, immediately starts playing the content. "View More": A button that opens a modal or detailed view of the selected content. Button Styling: The buttons should have a contrasting color to the overlay background (e.g., white text on a dark semi transparent background). Add hover effects to the buttons to improve interactivity (e.g., changing the button background color or slightly scaling up). 2. Displaying Detailed Information on Click: When the user clicks the "View More" button: A modal or overlay should appear, providing detailed information about the selected item, including: A larger image or video thumbnail. The full title. A detailed synopsis or description. Genre tags (e.g., Action, Comedy). User ratings and reviews (if applicable). Option buttons such as "Play," "Add to My List," "Share," and "Close." Animation Effects: Smooth transitions should accompany the modal display: Fade in effect for the modal. Background dimming to enhance focus on the modal. 3. User Experience Enhancements: Quick View Option: Allow users to quickly view more details without leaving the carousel view by showing the modal on clicking the "View More" button. Related Content Suggestions: Within the modal, display related titles based on the selected item, allowing users to explore similar content. 4. Event Tracking: Implement tracking for user interactions: Log hover events to analyze which titles attract more attention. Track clicks on the "Play Now" and "View More" buttons for user engagement metrics. 5. Responsive Design Considerations: Ensure that the hover effects and modal are responsive: On larger screens, the overlay can cover the entire item, while on smaller screens, it should adjust to maintain usability. Buttons should be large enough to be easily tapped on mobile devices. 6. Accessibility Features: Ensure that hover states are accessible: Provide focus states for keyboard navigation. Use ARIA roles and properties to announce the overlay and buttons to screen readers. Ensure color contrast meets accessibility standards.