JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myButton" class="button">Click me!</div>

CSS

.button {
    font-size: 30px;
    font-weight: bold;
    padding: 6px 10px;
    width: 220px;
    cursor: pointer;
    margin: 20px auto;
    background: #ddd;
    text-align: center;
}

.active {
    background: teal;
    color: #fff;
}

JavaScript

document.getElementById('myButton').onclick = function() {

    var className = ' ' + myButton.className + ' ';

    if ( ~className.indexOf(' active ') ) {
        this.className = className.replace(' active ', ' ');
    } else {
        this.className += ' active';
    }              
}