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

Results page challenge completed using tailwind

Will 90

@WSGokou

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Took a while to get everything accurate. Hardest part was figuring out how to edit the shadows since i never really use them. Because the gradient on the results box has transparency, the shadow on the left side of the summary box would show through until i tweaked it.

After uploading, i realised the colours for the stats box on the text and background aren't loading on prod. I'm loading the colours in dynamically through an array map and adding them in as variables, any insight on why it works locally and not in prod would be great. They're coming from the data.json file.

Fixed it going into the tailwind config and adding the styles to a safelist on the purge option, i'll leave this here incase anyone wants to use it for reference

Community feedback

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