Removing the div surrounding the tag solved the tailwind issues.

<section className="relative py-16 cursor-pointer bg-gray-500">
            
            <img className="object-contain rounded-2xl" src={img} alt="Not Found"></img>
            
            <div className="absolute top-32">
                <h3>{title}</h3>
                <p> {description} </p>
            </div>
</section>

I’m not sure what you want to achieve, but in order to fit the image to the container you must start by removing those paddings in the <section>.

Then try to add this to the first div:

div {
  height: 100%;
  display: flex;
}

Then add width: 100%; and height: 100%; to the image.

Let me know if it helps.

For some reason, I can’t resize Images to fit the container in react with tailwind [grey is the container]:

My component:

<section className="relative py-16 cursor-pointer bg-gray-500">
            <div className="relative h-96 min-w-100">
                <img className="object-contain rounded-2xl" src={img} alt="Not Found"></img>
            </div>

            <div className="absolute top-32">
                <h3>{title}</h3>
                <p> {description} </p>
            </div>
</section>

Besides this behaviour and params like min-w-[300px] everything works well when I use things from tailwind.

What am I missing here?