@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Wrap the page's whole main content in the
<main>
tag.
-
Avoid using
overflow-hidden
on your main container because it prevents scrolling on small screens like mobile devices.Also,
w-screen
might be unnecessary since, by default, it occupies 100% of the screen width and could lead to unnecessary horizontal scrollbars.
- Using two images is a solid solution, but consider creating a custom class in Tailwind and applying it as a background-image.
-
Consider centering it using Flexbox or Grid layout instead of
absolute
. The latter might cause content overflow on smaller screens.<div class="flex justify-center items-center min-h-screen"></div>
or
<div class="grid place-items-center min-h-screen"></div>
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!