Attendance Modal - Copy this React, Tailwind Component to your project

Design a modern, user-friendly modal UI to display student attendance log details with the following information: Student Name: Michael Martinez Avatar: Display the profile picture Gender: Male Student ID: 31908265 Class Name: Two Check-In Time: (show "Not Available" if null) Record Date: Display the date in a readable format (e.g., October 23, 2024) Shift ID: Show associated shift if needed Attendance Status: Absent/Present (highlight with color or icon) User Serial Number: -1 Institute ID: (Display if relevant) Created At and Updated At: Show as formatted dates Design guidelines: Use a clean, organized layout with clear sections for personal details, attendance details, and timestamps. Display status (e.g., Absent/Present) clearly with color-coding (e.g., red for absent, green for present). Show Check-In Time and Record Date in a human-readable format, and display a "Not Available" label if check-in time is null. Include "Close" and "Edit" buttons with prominent, accessible styling. Ensure the modal is responsive for both desktop and mobile. Consider using icons for key fields like attendance status and gender for better scanning. Ensure high contrast for readability and accessibility, with organized spacing. Bonus: Add light/dark mode toggles for better readability in different lighting. Include optional tooltips to clarify fields like User Serial Number and Shift ID if needed. Target audience: School administrators and teachers reviewing student attendance records.