Responsive FAQ accordion using Flex, React, Tailwind and Headless UI

Solution retrospective
I’m most proud of how clean and accessible the accordion component turned out using Headless UI and Tailwind CSS. I focused on semantic structure, keyboard accessibility, and visual feedback, like hover/focus states. It was also a good opportunity to reinforce component-based thinking in React and work with external UI libraries responsibly.
If I were to do it again, I’d pay closer attention to prop validations and potential misuse of components like Fragment, which caused a React warning.
What challenges did you encounter, and how did you overcome them?The biggest roadblock I encountered was a layout bug where the plus/minus icon inside one of the accordion panels was appearing misaligned instead of staying to the right side.
Fixing it involved explicitly setting w-full
on the flex container inside the DisclosureButton
I don’t have any particular issues at the moment, but I’d appreciate any general feedback — especially on code structure, accessibility, or Tailwind best practices. Always open to learning and improving.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Akiz-Ivanov's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord