JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo" class="off">éteint</div>
<div id="bar" class="off">éteint</div>

CSS

.off {color:red;}
.on{color: green}
#foo, #bar { cursor: pointer;}

JavaScript

document.getElementById('foo').onclick= function(){
    var on=getComputedStyle(this, null).color=="rgb(255, 0, 0)";
    this.style.color=on?"green":"red";
    this.innerHTML=on?"allumé":"éteint";
};

document.getElementById('bar').onclick= function(){
    var allume = this.className=="on";
    this.className=(allume)?"off":"on";
     this.innerHTML=allume?"éteint":"allumé";
};