Modal - Copy this React, Tailwind Component to your project

I need modal like thís const ClassModal = ({ isOpen, onClose, classes, selectedClasses, onClassToggle, onContinue, }) => { if (!isOpen) return null; return ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset 0 bg black bg opacity 50 flex items center justify center z 50" > <motion.div initial={{ y: 50 }} animate={{ y: 0 }} exit={{ y: 50 }} className="bg white rounded lg max h [90vh] w full max w 3xl shadow lg overflow hidden" > {/* Header */} <div className="flex justify between items center px 6 py 4 border b"> <h2 className="text xl font bold">Cá nhân hóa Khan Academy</h2> <button onClick={onClose} className="text gray 400 hover:text gray 600" > <FiX size={24} /> </button> </div> {/* Nội dung với thanh cuộn */} <div className="p 6 overflow y auto" style={{ maxHeight: "70vh" }}> <p className="text gray 600 text center mb 6"> Chúng tôi có thể hỗ trợ bạn học những khóa học nào? Chọn 4 5 và chúng tôi sẽ chọn những bài học phù hợp với bạn. </p> <div className="space y 6"> {/* Toán học (theo lớp) */} <div> <h3 className="text lg font semibold mb 3">Toán học (theo lớp)</h3> <div className="grid grid cols 3 gap 4"> {classes .find((group) => group.name === "Toán học (theo lớp)") ?.items.map((className, index) => ( <label key={index} className="flex items center space x 2 cursor pointer bg gray 100 hover:bg gray 200 p 2 rounded lg" > <input type="checkbox" checked={selectedClasses.includes(className)} onChange={() => onClassToggle(className)} className="form checkbox h 5 w 5 text blue 600" /> <span className="text gray 800">{className}</span> </label> ))} </div> </div> {/* Các nhóm khác */} {classes .filter((group) => group.name !== "Toán học (theo lớp)") .map((group, groupIndex) => ( <div key={groupIndex}> <h3 className="text lg font semibold mb 3">{group.name}</h3> <div className="grid grid cols 1 gap 2"> {group.items.map((className, index) => ( <label key={index} className="flex items center space x 2 cursor pointer bg gray 100 hover:bg gray 200 p 2 rounded lg" > <input type="checkbox" checked={selectedClasses.includes(className)} onChange={() => onClassToggle(className)} className="form checkbox h 5 w 5 text blue 600" /> <span className="text gray 800">{className}</span> </label> ))} </div> </div> ))} </div> </div> {/* Footer */} <div className="p 6 border t"> <button onClick={onContinue} className="w full bg blue 500 text white py 3 rounded lg hover:bg blue 600 font semibold" > Tiếp tục với {selectedClasses.length} khóa học </button> </div> </motion.div> </motion.div> ); };