Fees Details Modal - Copy this React, Tailwind Component to your project

Design-a-clean,-modern-modal-UI-to-display-the-following-financial-record-details.-Key-Information-to-Display:-Fees-Details:-Fees-ID:-90576423-Fees-Name:-Exam-Fee-Class-Information:-Class-Names:-One,-Two-Financial-Details:-Amount:-$10,000-Total-Amount:-$20,000-Progress-Status:-Completed:-0-Due:-0-Collection:-0-Assigned-To:-[Display-as-empty-if-not-assigned]-Fine:-$0-Schedule:-Start-At:-November-2,-2024,-6:00-PM-(formatted-for-readability)-End-At:-November-4,-2024,-6:00-PM-(formatted-for-readability)-Status:-PENDING-Timestamps:-Created-At:-[Human-readable-date-from-1730621783222]-Updated-At:-[Human-readable-date-from-1730621783222]-Design-Requirements:-Layout:-Organize-the-modal-into-sections-(e.g.,-Fees-Details,-Class-Information,-Financial-Details,-Progress-Status,-Schedule,-and-Timestamps).-Highlight-Status:-Use-a-distinct-color-or-label-for-the-"PENDING"-status-for-quick-visual-identification.-Whitespace:-Ensure-sufficient-spacing-between-elements-to-maintain-a-clean-and-uncluttered-appearance.-Responsiveness:-The-modal-should-adapt-well-to-both-desktop-and-mobile-views.-Action-Buttons:-Include-'Close'-and-'Edit'-buttons-with-a-modern-design.-Ensure-these-buttons-are-easy-to-identify-and-interact-with.-Accessibility:-Use-high-contrast-text-and-ensure-all-elements-are-easily-readable.-Consider-adding-ARIA-labels-for-assistive-technology.-Date-Formatting:-Convert-timestamps-to-a-human-readable-format.-Optional-Enhancements:-Tooltip-Support:-Include-tooltips-to-explain-financial-terms-if-needed.-Status-Icons:-Optionally,-use-icons-to-represent-the-status-(e.g.,-a-clock-icon-for-"PENDING").