Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code component solution (React/TypeScript/Tailwind)

#react#tailwind-css#typescript
Rachaelβ€’ 200

@rachaelhrlm

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is there anything I can do better?

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

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

@rachaelhrlm

Posted

@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

@PaliTriesToDesign

Posted

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

@rachaelhrlm

Posted

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

Added it in.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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