Reactjs: Removing space between buttons rendered as images in a group using tailwindcss

I am trying to render a button group with 3 buttons, but I am getting a space in between these. Below is my code

      <div className=" mt-2 flex items-center justify-center ">
        <div
          className="mt-1 inline-flex shadow-lg "
          role="group"
        >

            {products.map((product) => { 
                 return ( 
                 <div key={product.id}>
                 <button
                    type="button"
                    onClick={() => {
                      setPName(product.name);
                      setPId(product.id)
                    }}
                    className="prodButton float-left px-6 md:px-8 py-3 text-black text-xs font-pixeloid leading-tight inline-block focus:text-white transition duration-150 ease-in-out"
                  >{product.name.toUpperCase()}</button>
                  </div>
                  )
                })}
        </div>
      </div>

CSS for the class

.prodButton 
{
  background-image: url('/assets/images/Buttons/ProdButton.png');
  background-size: 100% 100%;
}

Below is how the group is looking

I cant seem to remove the white space in between. Please suggest Thanks in advance!