Untitled

<form action="" className="" >
    <div className="grid grid-cols-2 gap-3">
      <div className="relative">
        <input value={email} onChange={e => setEmail(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={password} onChange={e => setPassword(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={password} onChange={e => setPassword(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">
      <div className="relative col-span-2">
      <textarea value={desc} onChange={e => setDesc(e.target.value)} required type={viewing ? "text" : "password"} name="email" id="input" className=" h-44 w-full pt-5 resize-none focus:outline-none px-3 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">SALE PRICE</label>
      </div>
      {
        imageReceived ? (
          <div>
            {
              files?.map(file => {
                return(
                  <img src={file.preview} alt="" className="w-full h-full object-contain" />
                )
              })
            }
          </div>
        ) : (
          <div className="h-full" {...getRootProps()}>
            <input type="text" {...getInputProps()} />
            <p className=" cursor-pointer h-full rounded-md uppercase text-sm font-bold w-full bg-blue-primary flex items-center justify-center">Drag your file</p>
          </div>
        )
      }
    </div>

    
  </form>