Chapter - Copy this React, Tailwind Component to your project

Design an responsive UI for displaying chapter of book in a book reading web app using this function: function Chapter() { const { bookId, chapterNumber } = useParams(); // Get the book ID and chapter number from the route const [chapterContent, setChapterContent] = useState(''); useEffect(() => { // Fetch chapter content by book ID and chapter number fetch(`http://localhost:4000/api/books/${bookId}/chapter/${chapterNumber}`) .then(res => res.json()) .then(data => setChapterContent(data.content)) .catch(err => console.error('Error fetching chapter content:', err)); }, [bookId, chapterNumber]); if (!chapterContent) return <p>Loading...</p>; // Split the content by new line characters and render each line as a <p> element const formattedContent = chapterContent.split('\n').map((line, index) => ( <p key={index}>{line}</p> )); return ( <div className="container mx auto p 4"> {/* Ensure flexbox or full width is available */} <div className="flex justify center"> <h1 className="text 2xl font bold mb 4">Chapter {chapterNumber}</h1> </div> <div>{formattedContent}</div> </div> ); }