QR Code component using React and Tailwind-css

• Problem with backgrounds

the problem was that i couldn't adapt the image to the size of the screen in a responsive way, I wanted the image to cover the entire background no matter the size of the screen, but i could not figure out how to do this all my attempts ended in the image being cut or whitespaces on the screen, so i chose an image who seemed better on my 1366 *768 monitor and used bg-cover bg-no-repeat bg-[url('./assets/stars.jpg')] to implement it.

But i had a big problem with responsiveness, when i checked the site on my phone, the texts and divs where all the wrong sizes and it looked bad, I fixed it vertically using the prefix of tailwind "sm: md:", but I had a problem when viewing the site on horizontal mode on my phone there was a white section where i couldn't reach i don't know why so i couln't implement a solution.

• Dimensions and sizes

For heights and widths of the div i used tailwinds w-4/5 and h-4/5 fractions to make the div sections and squares a size that adapted to each screen, but i am not sure if this is the right way, i chose it because w-96 was too small for the div sizes i wanted.

• **Overused flex **

I think i used flex in places where i didn't need to i am not sure, like in the first too lines

<div className=" h-screen w-screen bg-cover bg-no-repeat  bg-[url('./assets/stars.jpg')] flex justify-center items-center" >
      <div className='md:bg-customBlueGray w-4/5 md:h-4/5 sm:h-3/5 bg-opacity-80 flex justify-center items-center '>

• w-screen or w-full

I was confused by this classnames, because if I did not used w-screen and h-screen at the first div my site ended up taking only part of the screen, and i think the way i used this classnames it caused the previous problems with the background. Also i am not sure why w-full and h-full in the first in the third and fourth div fixed an issue with the QR code where withouth them i couldn't change the size of it.

• Starting from scratch with vite and react

I am not sure what i can or should delete when i start a new project with react i left only the main.jsx, app.jsx and index.css this last one i deleted all the settings it had originally and left only the tailwind part of it. Is this is the right choice or should leave some other stuff from there to avoid problems.

If you have any comments on my questions, what i did wrong what i should do instead i would love to hear it, and let me know if i didn't explain myself properly in any part. thank you.