F a Q Item - Copy this React, Tailwind Component to your project

Create a responsive animated accordion component that displays 10 FAQs related to the Indian Constitution. The accordion should feature a smooth animation when expanding and collapsing, with a modern design that adapts to different screen sizes (mobile, tablet, desktop). Each question should act as a header, and when clicked, the corresponding answer should slide down or fade in. The component should be created using React, styled with TailwindCSS, and animated using either Framer Motion or CSS transitions. Design & Animation Requirements: Accordion Headers: Each FAQ question should be styled as an accordion header that the user can click to reveal the answer. The accordion headers should have hover effects and a bold design to draw attention. When a header is clicked, it should trigger a slide down animation (or fade in) to reveal the answer. The active header should have a highlight effect (e.g., background color change or border) to show it is open. Accordion Content (Answers): The content (answers) should be hidden by default and should animate into view when the user clicks the header. Use a sliding or fading animation for the content to provide a smooth transition. Ensure that the content is properly spaced and readable, with padding and margin adjustments for smaller screens. Responsiveness: On mobile screens, the accordion should stack vertically with appropriately sized text and spacing. On tablet screens, the accordion should adjust in width, ensuring that each section is easily clickable with touch gestures. On desktop screens, the accordion should expand to fit the width of the content area but maintain a clean, centered layout. Animation Library: Use Framer Motion for advanced animations or standard CSS transitions for simplicity. FAQ Content: Include 10 commonly asked questions about the Indian Constitution. Component Breakdown: Accordion Header: The clickable section with the question. Accordion Body: The section that holds the answer, which expands and collapses. Responsive Design: Ensure the component adapts to various screen sizes (mobile, tablet, desktop).