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

Overview: Design a responsive carousel similar to Netflix's user interface that showcases movies and TV shows. The carousel should allow users to scroll through different categories of content, with each item displaying relevant information and interactive elements. Components: Carousel Structure: Utilize a horizontal layout to display multiple items side by side. Each item in the carousel should represent a movie or TV show, featuring: Thumbnail image Title Genre tags (optional) Duration (optional) Navigation Controls: Include left and right arrows for navigation. Implement infinite scrolling, allowing users to loop back to the start when reaching the end of the list. Display an indicator showing the current position within the carousel (e.g., dots representing each section). Hover Effects: On hovering over a thumbnail: Display a play icon overlay on the thumbnail. Show additional information such as: Rating Brief description or tagline of the movie/show A button to add to "My List" or "Watch Later" Responsive Design: Ensure the carousel is mobile friendly by adjusting item sizes based on screen width. Use CSS media queries to adapt styles for different devices, ensuring usability on tablets and smartphones. Accessibility Features: Implement keyboard navigation for users who prefer using a keyboard over a mouse. Ensure all interactive elements are accessible via screen readers. Technical Specifications: Use HTML5 for structure, CSS3 for styling, and JavaScript (or a library like SwiperJS) for functionality. Consider using CSS Grid or Flexbox for layout management. Ensure images are optimized for fast loading times.