QR Code component solution (React/TypeScript/Tailwind)

Community feedback

• 

  P

  Dave Quah•660

  @MilleusPosted over 2 years ago

  Tailwind 😍 nicely done!

  I have a couple of minor suggestions:

  • The flex flex-col can be removed as the elements would naturally stack.

  <div class="flex flex-col bg-white p-5 border rounded-3xl w-[24rem]">
  // can be updated to
  <div class="bg-white p-5 border rounded-3xl w-[24rem]">
  

  • Tailwind has a space utility that acts like flex/grid's gap, but without having to add the flex/grid property.

  <div class="flex flex-col text-center gap-6 p-7">
  // can be updated to
  <div class="text-center space-y-6 p-7">
  

  Of course if the flex flex-col was added with intention, that's perfectly fine as well 😊

  Happy coding o/

  Marked as helpful

  1

  ---

  

  Rachael•200

  @rachaelhrlmPosted over 2 years ago

  @Milleus

  Ah, thank you so much!

  I didn't know about the space utility class, that's pretty neat. Updated solution to remove redundant classes and to use the space class.

  Thank you so much!

  0
• 

  Pablo Montoya Varela•300

  @PaliTriesToDesignPosted over 2 years ago

  Congrats! I like your solution.

  I would add just one more thing: box-shadow to the card. Nothing important.

  c:

  Marked as helpful

  1

  ---

  

  Rachael•200

  @rachaelhrlmPosted over 2 years ago

  @PaliTriesToDesign You have eagle-eyes! I completely missed the shadow on the design images.

  Added it in.

  0