Previewing photo div before upload overlapping with text

Question

I am running into an issue where the image previews are overlapping with the text on another div.

Here's the screenshots, first one is what it looks like before the preview and second one is what it looks like when images are added:

You see how it's over lapping with the text?

Keep in mind that I am using next.js, tailwindcss.

Here's my code:

 <div>
        <div className="font-semibold text-[22px] mt-[48px] mb-[16px]">
          Photos
        </div>
        <div className="mb-[24px] text-[16px]">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div className="w-[653px] h-[259px]">
          <DragDropUpload />
        </div>
      </div>

      <div>
        <div className="font-semibold text-[22px] mt-[48px] mb-[16px]">
          Pink Slip
        </div>
        <div className="mb-[24px] text-[16px]">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div className="w-[653px] h-[259px]">
          <DragDropUpload />
        </div>
      </div>

The DragDropUpload is the component containing the upload logic, here's the code below:

    import { useState } from "react";

    const DragDropUpload = () => {
      const [files, setFile] = useState<any | []>([]);
      const [message, setMessage] = useState<any | null>(null);
      const handleFile = (e: any) => {
        setMessage(null);
        let file = e.target.files;

    for (let i = 0; i < file.length; i++) {
      const fileType = file[i]["type"];
      const validImageTypes = ["image/jpeg", "image/png"];
      if (validImageTypes.includes(fileType)) {
        setFile((prev: any) => {
          return [...prev, file[i]];
        });
      } else {
        setMessage("Only images are accepted");
      }
    }
  };

  return (
    <>
      <div className="flex justify-center items-center px-2">
        <div className="h-auto">
          <span className="flex justify-center items-center bg-white text-[12px] text-red-500">
            {message}
          </span>
          <div className="h-[259px] w-[653px] border-2 border-dashed border-gray-400 overflow-hidden relative items-center rounded-md cursor-pointer">
            <input
              type="file"
              onChange={handleFile}
              className="h-[259px] w-[653px] opacity-0 z-10 absolute"
              name="files[]"
              multiple
            />
            <div className="h-[259px] w-[653px] bg-white absolute z-1 flex justify-center items-center top-0">
              <div className="flex flex-col">
                <span className="text-[16px] mb-[2.5px] ">{`Drag and Drop here`}</span>
                <span className="text-[16px] ml-[67px] mb-[8.5px]">or</span>
                <span className="text-center text-[16px] w-[135px] h-[39px] p-[7px] ml-2 rounded-full bg-black text-white ">
                  Select file
                </span>
              </div>
            </div>
          </div>
**// IMAGE PREVIEW IS HAPPENING HERE !!!!!!!!**
          <div className="grid grid-cols-5 w-[659px] gap-[10px] mt-[24px] ">
            {files.map((file: any, key: any) => {
              return (
                <div
                  key={key}
                  className="h-[117px] w-[117px] flex justify-between rounded-lg bg-white"
                >
                  <div className="gap-2">
                    <div className="h-[117px] w-[117px] ">
                      <img
                        className="h-[117px] w-[117px] rounded-lg"
                        src={URL.createObjectURL(file)}
                      />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

export default DragDropUpload;

Any help would be appreciated, I can't figure it out.

Answer 1

I figured it out...

This is what I needed to modify this:

            <div className="w-[653px] h-[259px]">
          <DragDropUpload />
        </div>

to this:

            <div className="w-[653px] h-auto">
          <DragDropUpload />
        </div>