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

Responsive Product Card w/ React + Tailwind CSS

#react#tailwind-css
'ROON 10

@hrazith

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Aliyu-Saidu

Posted

Hi @hrazith, that is a nice work!

  • But doing a small project like this using react/tailwind css, don't you think is an overkill? Except if you just want to try out your react/tailwind skills.
  • I suggest you to try Vanilla CSS Flexbox or Grid or both to make it look good on both mobile and desktop devices. You may wish to try to read 'Complete Guide to CSS Flex and Grid by Shruti Balasa' (https://shrutibalasa.gumroad.com/l/css-flex-and-grid/BlackFriday22) . It is one of the best books out there on the topic
  • All together, I think you need to work on the desktop view to look close to the given design. Good luck
0

'ROON 10

@hrazith

Posted

@Aliyu-Saidu Thanks! yes I was doing it to brush up my React + Tailwind skills. Thanks for the link. I will check out the guide.

Also not sure why you are seeing the desktop view not close to the design. Its looking near perfect on my end. Hope its not some cross-bowser issue I didn't solve.

0

@Aliyu-Saidu

Posted

@hrazith Yes the book also has tailwind version. I trust you would like it. The book is however not free but it is currently on sale.

As for the design, I am not sure if the problem is a cross browser issue because my solution is also having similar problem. My solution over here is a bit different from what is displayed in the "Design Comparison".

Kindly give me a shout out if you are able to resolve it before me. I sure will get back if I find any solution!

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