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

What are you most proud of, and what would you do differently next time?

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

What specific areas of your project would you like help with?

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.