JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" name="quantity1" pattern="[-+]?[0-9]*[.,]?[0-9]+" > <br />
  <input type="number" name="quantity2" value="1.1" > <br />
  <input type="number" name="quantity3" value="1,1" > <br />
  <input type="number" name="quantity2" value="1.1" lang="cs"> <br />
  <input type="number" name="quantity3" value="1,1" > <br />

      type 1.1 or 1,1 manually please

CSS

input:invalid {
    border: 2px solid red;
  }