Responsive Page using Tailwindcss and React.js

Community feedback

• 

  A B•900

  @ABojo

  Posted almost 2 years ago

  The project looks awesome, and you did a great job. I’ll try my best to help you with the dropdown issue you’re having.

  First, you want to give the dropdown buttons a position of relative. If you do that, each dropdown box will be positioned according to its parent dropdown button.

  You’d want each dropdown button to have the relative class like this:

  <li class="relative gap-1 flex justify-between items-center">
  

  Second, clicking any dropdown button will cause all of the dropdowns to be toggled at the same time, but you want each dropdown to be toggled separately. I looked at your code and each dropdown box is being toggled by the same piece of state. I would make a dropdown component, so each instance will have its own isOpen state, and that way only the correct dropdown will be opened.

  Also, it’s important to use a button element for your dropdown buttons because they come with important accessibility features included.

  If you need any more help, let me know!

  01

  Marked as helpful