Responsive card layout using React,Tailwind CSS and Vite

Community feedback

• 

  P

  Teodor Jenkler•3,740

  @TedJenklerPosted 2 months ago

  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

  Marked as helpful

  1

  ---

  

  Matthew Kuria•170

  @matthewkuriaPosted 2 months ago

  Hi @TedJenkler, Wow! this is new way to me...I don't know much about Translate-x and y in TailwindCSS ...It will be great to explore the insight...thank you so much for your time and the awesome insight!

  1
• 

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  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 :)

  Marked as helpful

  1

  ---

  

  Matthew Kuria•170

  @matthewkuriaPosted 2 months ago

  @SvitlanaSuslenkova Thank you so much for your time and helpful comment...Let me re-style the body again using your insight.I have used flexbox but let me try the grid.

  0