JSFiddle - React, Tailwind, and code Playground

HTML

<b>Enter # of Circles</b>
   <br>
   <input type="number" id="circles" min="1" step="1">   
   <form>
      <div id="Participentfieldwrap">
        <svg height="100" width="200">
            <line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
            <svg height="100" width="100">
               <circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
               <animate id="ani" xlink:href="#cir" attributeName="fill" values = "#000;#000;#000;#000" dur="0.7s" repeatCount="indefinite" />
            </svg>
        </svg>
  <br>
        <b>Status</b>
        <br>
        <input type="number" id="Color" onkeyup="myFunction(this)"  min="1" step="1">
        <script type="text/javascript"> 
              
   function myFunction(val) { 
    var val1=val.id.substring(val.id.indexOf("_")+1,val.id.length)
    var cir = document.getElementById("cir_"+val1);
    var into = document.getElementById("Color_"+val1);        
    var ani = document.getElementById("ani_"+val1);
    val=into.value;
                if(val*1 == 1){
                    cir.style.fill = "green";
                    ani.setAttribute("values", "#0f0;#0f0;#0f0;#0f0");
                }
                else if(val*1 == 2){
                    cir.style.fill = "blue";
                    ani.setAttribute("values", "#FFC200;#FFC200;#800;#FFC200");
                }
                else if(val*1 == 3){
                    cir.style.fill = "red";
                    ani.setAttribute("values", "#f00;#f00;#f00;#f00");
                }
                else if(val*1 == 4){
                    cir.style.fill = "blue";
                    ani.setAttribute("values", "#3333cc;#3333cc;#3333cc;#3333cc");
                }
                else{
                    cir.style.fill = "grey";
                    ani.setAttribute("values", "#99ccff;#99ccff;#99ccff;#99ccff");
                }
            }
         </script>
      </div>
 </form>
 <script...

CSS

div {
      width: 120px;
      height: 120px;
      display: inline-block;
      margin-left: 1px;
      }