JSFiddle - React, Tailwind, and code Playground

HTML

<!-- JavaScript element.classList Object toggle() and contains() methods Example -->
<!-- blog.kevinchisholm.com -->

<div id="foo">click me to toggle 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.toggle("bar");
    if(this.classList.contains('bar')){
        this.innerHTML = 'i now <u>have</u> the class "bar"';
    } else {
        this.innerHTML = 'i <b>no longer</b> have the class "bar"';
    }
    
},false);