JSFiddle - React, Tailwind, and code Playground
HTML
<!-- JavaScript element.classList Object add() method Example -->
<!-- blog.kevinchisholm.com -->
<div id="foo">click me to add the class: "bar"</div>
CSS
#foo:hover{
cursor:pointer;
}
.bar{
background-color: yellow;
padding: 10px;
font: bold 22px Arial;
color: red;
}
JavaScript
var foo = document.getElementById('foo');
foo.addEventListener('click',function(){
this.classList.add("bar");
this.innerHTML = 'i now have the class "bar"';
},false);