JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<br/>
<br/>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<div class="connector">
    &nbsp;
</div>
<div class="red">
    &nbsp;
</div>
<input type="text" id="text" value="1" />

CSS

.red
{
    background-color:red;
    width:10%;
    height:50px;
}
.green
{
    background-color:green;  
}
div
{
    display:inline-block;
}
.connector
{
  background-color:red;
  display:inline;
  width:40px;
  height:5px;
  margin-left:-5px;
}
.editlabe
{
    padding-left:5px;
    padding-right:5px;
    padding-top:0px;
    font-size:15px;
    font-family:arial;
}

JavaScript

$( "#text" ).click(function() {
    $( ".red" ).addClass("green");
    $( ".connector" ).addClass("green");
});