Untitled

<form action="" className="" >
    <div className="grid grid-cols-2 gap-3">
      <div className="relative">
        <input value={name} onChange={e => setName(e.target.value)} required type="text" name="email" id="input" className="pt-3 h-12 w-full focus:outline-none px-3 font-bold text-sm bg-blue-primary rounded-md" />
        <label id="main" htmlFor="email" className=" main-label text-header absolute left-3 top-3 mt-1 font-bold text-xs">PRODUCT NAME</label>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className="relative">
          <input value={price} onChange={e => setPrice(e.target.value)} required type={viewing ? "text" : "password"} name="email" id="input" className="pt-3 h-12 w-full font-rubik focus:outline-none px-3 font-bold text-sm bg-blue-primary rounded-md" />
          <label id="main" htmlFor="email" className=" main-label  text-header absolute left-3 top-3 mt-1 font-bold text-xs uppercase">PRICE</label>
          <div typeof="button" onClick={() => isViewing(prev => !prev)}>
          </div>
        </div>
        <div className="relative">
          <input value={price} onChange={e => setPrice(e.target.value)} required type={viewing ? "text" : "password"} name="email" id="input" className="pt-3 h-12 w-full font-rubik focus:outline-none px-3 font-bold text-sm bg-blue-primary rounded-md" />
          <label id="main" htmlFor="email" className=" main-label  text-header absolute left-3 top-3 mt-1 font-bold text-xs uppercase">SALE PRICE</label>
          <div typeof="button" onClick={() => isViewing(prev => !prev)}>
          </div>
        </div>
      </div>
    </div>
    <div className="grid grid-cols-3 gap-3 mt-3 bg-red-500">
      <div className="relative w-full col-span-2">
        <TextareaAutosize value={desc} onChange={e => setDesc(e.target.value)} required type={viewing ? "text" : "password"} name="email" id="input"  minRows={15} className="w-full resize-none focus:outline-none px-3 py-5 font-semibold text-sm bg-blue-primary rounded-md" />
        <label id="main" htmlFor="email" className=" main-label  text-header absolute left-3 top-3 mt-1 font-bold text-xs uppercase">DESCRIPTION</label>
      </div>
      {
        imageReceived ? (
          <div>
            {
              files?.map(file => {
                return(
                  <img src={file.preview} alt="" className="w-full h-auto  grid items-center bg-blue-900 object-contain" />
                )
              })
            }
          </div>
        ) : (
          <div className="flex flex-col bg-blue-500">
            <div {...getRootProps()} className="cursor-pointer mb-2 h-full flex-1 rounded-md uppercase text-sm font-bold w-full bg-blue-primary flex items-center justify-center">
              <input type="text" {...getInputProps()} />
              <p>Drag or drop</p>
            </div>
            <div className="relative">
              <input v required type="text" name="email" id="input" className="pt-3 h-12 w-full focus:outline-none px-3 font-bold text-sm bg-blue-primary rounded-md" />
              <label id="main" htmlFor="email" className=" main-label text-header absolute left-3 top-3 mt-1 font-bold text-xs">PRODUCT URL</label>
            </div>
          </div>
        )
      }
    </div>
</form>