Responsive card layout using React,Tailwind CSS and Vite

Hi @matthewkuria,

Just for fun, I’ll tell you about another way to center a div using Tailwind classes: set the parent div with relative and the child div with absolute. Then, apply top-1/2 and left-1/2 to the child, along with transform and -translate-x-1/2 -translate-y-1/2. While using flex with justify-center and items-center is generally better, this is still a useful technique!

I also noticed you’re using too many containers in React. You can avoid this by using fragments (<> </>) when a div isn’t necessary. Remember that both HTML, body, and #root can be styled directly, so extra containers are often unnecessary. For text inside a card, instead of using a div, you can simplify it by using flex flex-col to make your code cleaner.

Keep up the great work!

Best, Teodor

You can use figma to measure design images.

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about min-height. You can use grid instead of flex too(with some changes). Hope you found this comment helpful :)