Tailwind CSS Responsive Design

I am currently doing a web design challenge. I am using REACT and Tailwind CSS for styling.

enter image description here

I am basically making a responsive page, the image shows the layout of how the final product should look like.

So far this is what i have, the large screen layout I was able to work but I have problems with the smaller/medium screen sizes.

This is what I have right now for the medium screen which is wrong

and here is my code(this is the page file, i have split up the components):

Anyone have any ideas? I have tried using breakpoints but its messing up.