Apple Product Collage - Copy this React, Tailwind Component to your project

Design a photo collage for displaying a variety of Apple products, such as the iPhone, MacBook, and AirPods, in a sleek, Apple inspired style using React and Tailwind CSS. The collage should be built with a grid layout, where each product image is showcased in a clean and minimalistic card design. The grid should be dynamic and responsive, adapting to various screen sizes, with 4 5 images per row on desktop, 2 3 images per row on tablets, and 1 2 images per row on mobile devices. The design should follow a dark theme, with a dark gray or black background to allow the product images to stand out, giving it a premium Apple like feel. Each image should have a soft shadow and a hover effect, such as a subtle zoom in or glow to highlight interactivity. Below or overlaid on the images, the product names should be displayed in a small, sleek font that maintains the minimalistic aesthetic. When hovering over the images, smooth animations should be triggered, such as a fade in overlay for text or a subtle transition to showcase more product details. The collage should be fully responsive, ensuring that it looks excellent on all devices. It should be dynamically generated, with products mapped from an array, making it easy to update the displayed items. The overall user experience should be intuitive, with elegant transitions and a polished UI that mimics the Apple design language, emphasizing simplicity, elegance, and interactivity. The grid layout should be achieved using Tailwind CSS utilities like grid, flex, and hover effects, ensuring a fast and modern design implementation.