Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

React, Tailwind, Typescript

kanarian•80
@kanarian
A solution to the Rock, Paper, Scissors game challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


It was fun trying out Tailwind!

IMO this was quite an easy one, but I really liked doing the 'mobile design first' approach: First trying to design the mobile layout and afterwards the desktop layout. The Tailwind media queries made this so nice to do! It was interesting to see the use of the orders in flex.

Only concerns I have with tailwind is that all looks a bit cluttered and there seems to be a lot of code duplication, which is also mentioned in the docs as not being necessarily something bad? Dont know how I feel about that

Getting the 'shaded' circles behind the correct answer, was really difficult for me: Playing around with the z-indices was quite a hassle. In the end, I managed to get it done by changing the z-index of both buttons based on whomever is the winner. I'm really wondering if there are easier ways of adding these circles.

Another challenge was trying to get everything to look good on the iPhone XR, I am using custom divs as the connector bars. These all have an absolute position, which worked OK on desktop, but apparently for safari, the parent needs to be a relative element, which took some time for me to figure out, but now it works!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on kanarian's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License