JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>
<div  class="switch off">éteint</div>

CSS

.off {color:red;}
.on{color: green}
.switch { cursor: pointer;}

JavaScript

var tabelts=document.getElementsByClassName('switch');

for (i=0;i< tabelts.length;i++){ 
    tabelts[i].onclick= function(){
    var allume = this.className.indexOf("on")>-1;
    this.className=(allume)?"switch off":"switch on";
    this.innerHTML=allume?"éteint":"allumé";
    };
};