Hi @priyanshisharma. Good job with the component. It's around 70% pixel perfect.

I saw a few errors in the way the markup is structured. Please refer to the image below. It will give you an idea of how things should be divided.

Blue/Orange blocks are the man blocks. Red are the inner divisions.

If you refer to the Figma design, you will see that we have used auto-layout (similar to display flex) in the main blocks. So in the first block, the padding will be 20px, gutter space (space b/w the red blocks) is going to be 17px. The horizontal line can be the border-bottom of the first block.

If you fix your markup, you won't have to use <br /> tags anywhere. It's not a good practice to use <br /> tags for spacing btw.

Thanks for such a well written review @salil-naik ! I've made the corresponding changes, the component appears as follows now. 😄

@priyanshisharma Could you just add the component to /forum route so it could be viewed in the browser in the buil preview?

@priyanshisharma I think the reason why these icons are not looking good is that they are small resolution images taken from figma design. Replacing them will svg icons would be a better solution so they don't get pixelated.

Both the icons social and action ones.

@pkspyder007 where can I get the svg files for the action buttons from? 😅

@priyanshisharma check out this site https://feathericons.com/