Calculator App built with React and TailwindCSS

Adding to the previous comment, personally I would add padding top and down to the body and give the background the same color as the main background-color: rgb(58, 71, 100).

The reason is that there is little space between the top and bottom. This was so that you would have used buttons instead of just label in the part to change the view, since the label could be positioned so that it comes out on top as the number and the button is inside the box to change styles to the calculator. If you achieve that it would be the only detail that would be missing in your project because everything else you have done quite well. The experience shows!

Good Coding!

Heyo,

This looks amazing. I'm trying to wrap my head around useReducer since a few days. It's complicated but seems like this challenge is the perfect use case for it. How you used it here seems easy enough to follow (as useReducers go.. >.<). Also, I never thought I'll say this but Tailwind really suits so well for this. It makes the theme-related code easy to follow (although I could argue about chained ternary operators, but it still looks clear enough).

The only improvement I could suggest is about your theme switch. It would be nice if all the elements involved would be grouped together a bit better with something more semantic than a div. A form and fieldset perhaps, to wrap around all the labels, THEME text and inputs. Those labels belong to the form so I think they shouldn't be outside of it. The THEME text is also outside of this, even though it's logically the title of the whole form. I'd use a <legend> element for this. But I appreciate how hard it is to style forms properly, it's usually a bit of a headache.