Interactive Pricing Component using React

The styling for this one got a bit messy towards the end, due to my not thinking ahead with the differences between the mobile and desktop design. However I am pretty happy with the finished result.

General question regarding the colors given in the style guide, I often find that they are not exactly the same as those shown in the design, particularly with grays for things like text. The same goes for font sizes/font weights, I usually have to reduce the given font size to make things match up properly.

Specific question for React users, how do you go about rendering elements that may change position on the page between mobile and desktop sites? For example the "$16.00 / month" element in this design which moves above the slider bar in desktop view. Currently I am copy pasting that element into the location I want it for desktop, the giving it a different class from its identical element in the mobile position (e.g. slider-dollars__container--desktop). Then I set this to display: none then to display: block inside a media query. However this approach does not seem to be very elegant so I am sure there must be a better way.

EDIT: I just tried accessing the github deployment on my mobile device and I cannot scroll down the page in order to see the whole thing, can anybody suggest why this is happening? (the slider bar is not filling properly on mobile either if anyone has any ideas).

Cheers, Glen