Room Detail Modal - Copy this React, Tailwind Component to your project

Here's a breakdown of the Room Detail Modal component: 1. Component Structure and State Management: I used useState to manage two primary states: roomData and peopleData The modal is conditionally rendered based on the isOpen prop Implemented a clean, responsive design using Tailwind CSS grid and flexbox 2. Room Summary Section: Displays room details using icons from react icons Includes Room Number, Room Type, Capacity, and Status Status has a dynamic color based on occupancy (destructive/red for occupied) Responsive grid layout for room information 3. People Information Table: Renders a detailed table of people in the room Columns include ID Number, Name, Gender, Date of Birth, Phone Number, Place of Origin, and Notes Alternate row backgrounds for better readability Responsive table with horizontal scroll on smaller screens 4. Modal Interaction: Close button with hover effect using Tailwind transitions Modal has a semi transparent background overlay Centered modal with max width for better viewing on different devices Additional Suggestions: Consider adding pagination for large datasets Implement sorting functionality for table columns Add tooltip or modal for more details when clicking a person's row