Center Popup - Copy this React, Tailwind Component to your project

{isPopupOpen && ( <motion.div className="fixed inset 0 flex items center justify center z 50" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.9 }} transition={{ duration: 0.3 }} > <div className="fixed inset 0 bg black opacity 50" onClick={closePopup}></div> <motion.div className="bg white rounded lg shadow xl p 6 w full max w md relative" initial={{ y: 50 }} animate={{ y: 0 }} exit={{ y: 50 }} transition={{ type: "spring", stiffness: 300 }} > <button onClick={closePopup} className="absolute top 4 right 4 text gray 500 hover:text gray 700" aria label="Close panel" > <svg className="h 6 w 6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> </button> {selectedUser && ( <div> <h2 className="text 2xl font bold mb 4">{selectedUser.name}</h2> <p className="mb 2"><strong>MUJid:</strong> {selectedUser.mujid}</p> {selectedUser.allSelectedCourses ? ( <> <p className="mb 2"><strong>Email:</strong> {selectedUser.email}</p> <ul> {Object.entries(selectedUser.allSelectedCourses).map( ([key, value], idx) => ( <li key={idx}> <strong className="text rose 800"> For Semester {key}: </strong> <ul> <li> <strong>Lab Courses:</strong>{" "} {value.labCourses} </li> <li> <strong>Theory Courses:</strong>{" "} {value.theoryCourses} </li> </ul> </li> ) )} </ul> <p className="mb 2"><strong>Term:</strong> {selectedUser.isEven ? "Even" : "Odd"}</p> </> ) : ( <p>No additional details available. </p> )} </div> )} </motion.div> </motion.div> )} This is a center popup, design its ui and make the ui very dynamic and colorful also use icons and framer