All solutions

My main focus is responsive design so please have a look on the live site and tell me if there is anything wrong with the responsiveness.

I use flex-column for the mobile design and turn it into flex-row-reverse for the desktop design, I wonder if it's the right way to do so. Please let me know the best practice for this kind of design.

There is some gap on the bottom of screen on the signup screen when I check the site from my phone. Tried to tweak some of the tailwind classes but got no clear idea why the gap exists. Please let me know if spot the cause.

Feedback on any aspect is welcome! Thank you!

I'm using Vue cdn for this solution, i wonder if i did it the right way. I put the Vue createApp in a separate file named app.js in the same directory as index.html and call it via tag from the html.

Also, you might notice improper usage of html tags. Although my main focus is slicing the design, accessibility is important and i will learn it in the future. Please give me feedback regarding this particular thing, because currently i don't know what i don't know on this kind of stuff.

And lastly, please check the responsiveness of this solution. I need to know if i did it right.

Any feedback is welcome!

Thank you!

I'm still unsure why the instructions give me two screen size. And i don't know if my solution is "responsive design". But i do limit the content width to 350px so it doesn't go too wide.

And please give example of best practices for this challenge. Thankyou.