NFT Preview Card component solution (React/TypeScript/Tailwind)

Community feedback

• 

  P

  Dave Quah•650

  @Milleus

  Posted about 3 years ago

  Hi there o/

  Nice work! I like the clever use of Tailwind's group utility class for the image hover 👍

  I do have one minor feedback and that is to use <button> or <a> for the interactive (hover-able/focus-able) elements instead of applying hover directly to the h1, div or p. Using a <button> or <a> element naturally makes the website much more accessible for screen reader / keyboard users because these elements are "tab-able" by default.

  This challenge doesn't explicitly state that whether the interactive elements are links or trigger a pop-up, but it does seem like they are meant to (to me at least). For example,

  • "Hover-able image" could be a button to pop up a bigger image, or a link to a bigger image.
  • "Hover-able Equilibrium #3429" could be a link to a page with more details about this NFT.
  • "Hover-able Jules Wyvern" could be a link to the user's profile page.

  Something for your consideration perhaps. Happy coding! :)

  00

  Marked as helpful