Interactive Book Flip Component in React with Tailwind CSS

Create a portfolio page with a "book like" effect, where users can interact with the pages by dragging the sides to turn them. Ensure that the component remains responsive and visually appealing across different screen sizes. Features: Book Layout: Container (.book container): The outer wrapper of the book. Should center the content both horizontally and vertically and handle the overall responsive behavior. Pages (.page): Each page should have two sides: A front page (left side). A back page (right side). Each page will flip when clicked or dragged, revealing the content on the next side. Page Flipping Animation: Use CSS to simulate the book's page flipping effect. The page will rotate 180 degrees when clicked, using the rotateY transformation along with perspective to create a 3D flip effect. The transition between the pages should be smooth and gradual using transform and transition properties in CSS. Interactivity: Click based Interaction: Clicking on a page will trigger the flip to the next page. Drag based Interaction (Optional): Implement mouse or touch events (mousedown, mousemove, mouseup) to allow users to drag and flip the page interactively, simulating a real world book turn. Responsiveness: The book and pages should scale automatically to fit different screen sizes, including mobile devices and tablets. Use vw and vh units for relative sizing and media queries to handle specific screen sizes. Content: Each page will display content, such as text, images, or other media. The content should be properly aligned and visually appealing, with consistent spacing and margins.