FAQ accordion (Tailwind CSS, no JS)

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

The result looks quite good. I used only Tailwind CSS without JS to do the accordion and relied on and .

What challenges did you encounter, and how did you overcome them?

I wasn't sure if I could achieve this without Javascript, but it seems possible after all ;)

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

I used grid to display all the questions/answers. I wanted to rely on md:max-w-[524px] but with that there was a slight change in width when I unfolded the answer. I couldn't find a solution and I used a fixed value in the end (md:w-[524px]). Is there a way to avoid this resizing?

Also I tried to apply some animation when the answer appears but I was unable to get it working. And I don't know why :(

I tried things like: transition duration-300 group-open:opacity-100 opacity-0 on the paragraph of the answer, but no visible animation...

I tested with hover: instead of group-open: and then I can see the animation. group-open: is fullfilled (opacity is set to 100 when paragraph is visible...). Maybe I'm missing something obvious.