Loopstudios landing page solution

Community feedback

• Account deleted

  Hi there! ✌️ Congrats on completing this challenge 🥳🎉

  Answering your question, your solution is good, but as you commented, it can be improved a bit and by removing some tags from your code.

  This is a way of how I would animate the menu, using only TailwindCSS.

  <ul className={`flex items-center gap-5`}>
  {items.map((item) => (
  <li key={item.id}>
  <a
  href={item.link}
  className={`group relative block text-center text-tw-white after:content-[''] after:absolute after:bg-white after:bottom-0 after:left-0 after:h-[2px] after:w-0 hover:after:w-full after:transition-all`}
  >
  {item.text}
  </a>
  </li>
  ))}
  </ul>
  

  As you can see, I removed the span tag and just used the after pseudo-element.

  I hope I have helped you, and solved your problem. 🙃

  All the best, Christian.

  Happy coding! ✌️

  Marked as helpful

  0