All solutions

I'm not good with color theory. For now my thought process. is "just switch to light/dark shade of the same color and try to match how 'far' the color is from black/white". lol.

Share some good resources about the topic. :)

Is it common practice to declared the section height and just center the content within the fame? I find it to be more convenient than adjusting padding/margin pixel by pixel until the content expands the section to match the design's.

Ok. I am getting OCD from that reset button always re-enabling after inputs lose focus. I decided I'll just let it slip since it doesn't break functionality. Please share some thoughts on how to deal with that or if there is a better approach.

I am defaulting the Number of People to 1 on resets and app init. I could have gone for a default of 5% tip as well.

On the screenshot of the target active states there seems to be a hover/active state for the card body (content) as well as for the ellipsis in the header.

I decided I will do a :hover style on the card body. Turn it off at :active. Another :active on the ellipsis.

This way when the ellipsis is :active. The card body returns to normal style and doesn't compete for attention.

Edit: I had to retake the challenge as I am out of screenshots haha. @MikevPeeren point taken

On the screenshot of the target active states there seems to be a hover/active state for the card body (content) as well as for the ellipsis in the header.

I decided I will do a :hover style on the card body. Turn it off at :active. Another :active on the ellipsis.

This way when the ellipsis is :active. The card body returns to normal style and doesn't compete for attention.

The sections are seamless, I size them by imagining paddings around the content instead of just eyeing the distance between visible content. Please share your thoughts regarding this approach.