Submitted almost 3 years ago

stats card using react and tailwindcss with hover states

tailwind-css, react

Hadjer Laissaoui•160

@HadjerL

A solution to the Stats preview card component challenge

Preview Code

Solution retrospective

Hey everyone, This is my solution for the challenge and the first time using react. I used Tailwindcss. I am not yet used to react but I did my best to make it as close as I could to the design. Any feedback is highly welcomed and if you could provide me with good resources to learn react and practice it. As for the questions I want to know why does the picture keep getting cropped from the top in the mobile design?

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hi Hadjer, congrats on completing this challenge!

I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:

The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:
```
img {
mix-blend-mode: multiply;
opacity: 75%;}
```
✌️ I hope this helps you and happy coding!
Marked as helpful

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