Booking Interface - Copy this React, Tailwind Component to your project

A booking interface with a grid layout. The left column lists room names (e.g., HD.M 101, HD.M 102) alongside small images representing each room. The top row contains time slots (e.g., 15:00, 16:00) across the evening hours from 15:00 to 23:00. Each cell in the grid corresponds to a room's availability for a specific time. Available slots are empty, while unavailable or booked slots are shaded. To allow users to book multiple slots via drag and drop, the cells should be selectable, enabling interaction by dragging across multiple time slots and submitting the booking request. Here’s a more detailed breakdown of what the AI generated code would need to cover: Key Features: Room list on the left: Each room should be visually represented with an image and its name, aligned vertically. Time slots along the top: Time slots (e.g., 15:00, 16:00, etc.) displayed as column headers, aligned horizontally. Time grid cells: Each cell represents the booking availability for that room at a specific time. Interactive drag and drop selection: Users can click and drag to select multiple time slots, updating the selected cells visually. Selected slots styling: Visual feedback, such as changing the background color for selected slots. Booking submission: Once the user has selected a block of time, the system should handle booking logic and submit the selected time for processing.