Responsive Gallery Component - Copy this Html, Tailwind Component to your project

Create a responsive image and video gallery using HTML, CSS, and JavaScript. The gallery should display a grid of images and videos that can adapt to different screen sizes. Include the following features: Image and Video Grid: A responsive grid layout that shows multiple images and videos. Each item in the gallery should be clickable to open a modal view. Modal View: When an image or video is clicked, it should open in a fullscreen modal. The modal should include a close button to exit the modal view. Image Slider: Implement an image slider that can be navigated using previous and next buttons. The slider should automatically transition between images after a certain interval. Include keyboard navigation (left and right arrows) for the slider. Responsive Design: Ensure that the layout works on mobile, tablet, and desktop devices. Use CSS Flexbox or Grid for layout management.