How to put images on top of box using TailwindCSS and Reat?

<section className="mb-6">
        <h2 className="text-center text-5xl font-semibold mb-20">
          EyeCanKnow's algorithms
        </h2>
        <div className="flex px-10 relative">
          <img
            src={camera_image_url}
            className="flex-none absolute top-10 left-4 rounded-2xl mb-12 w-1/2 h-96 object-cover"
            alt="camera"
          />
          <div className="w-full h-96 mb-20"></div>
          <div className="w-full h-96 mb-20"></div>
          <div className="lg:pl-32 xl:pl-20 flex items-center bg-gray-200 rounded-xl text-2xl text-gray-700">
            <p className="pr-8">
              EyeCanKnow utilizes the <b>camera</b> on a test taker's mobile
              device to{" "}
              <u className="underline-offset-4 decoration-red-400">
                measure their deception
              </u>{" "}
              about past experiences via changes in involuntary eye behavior,
              pupil diameter, eye movement, blinks, fixations, and other things.
            </p>
          </div>
        </div>
      </section>

Use Relative on Parent Instance and put Absolute class instead of fixed. Fixed is only use for navigations or bottoms.