Submitted 2 months ago

Faq-Accordion with React and Tailwind

tailwind-css, typescript, react

Alexwz89•480

@Alexwz89

A solution to the FAQ accordion challenge

Preview Code

Solution retrospective

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

Happy to start merging tailwind css and typescript into my React project.

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

The background image setting is the most tricky part for me. In order to use bg-[url()] utility, I have to move two background image into public folder.

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

Definitely Aria part

Code

Please log in to post a comment

Community feedback

Grecco Oliva, Franco•290

@GreccoOliva-Franco

Posted about 2 months ago

Comments on your solution:

Nice match of sizes

Comments on my solution: I solved the bg img with:

<body className="relative flex flex-col h-screen ...">
  <img
    src={src}
    className="absolute top-0 w-full aspect-auto"
  />
  { /* FAQs Card */ }
</body>

And the overlap with a "z-1" for the card. That might come in handy for future solutions

I completely agree on the Aria part. I'm offloading that part for the future

Marked as helpful

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