Side Drawer - Copy this React, Tailwind Component to your project

Generate a SideDrawer component using React.js and Tailwind CSS. The component should have the following features: A header at the top with a customizable title. A close button ('X') in the top right corner. The SideDrawer should close when the 'X' button is clicked or when the user clicks outside the drawer. The component should accept children as a prop to allow dynamic content inside the drawer. It should also accept a prop to determine which side of the screen the drawer will appear from (left or right). Include a smooth opening and closing animation. Ensure that the drawer is responsive and works well on both mobile and desktop devices. Please provide the full component code with Tailwind CSS classes and any necessary state management for open/close functionality.