JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<button class="btn">A</button>
  <button class="btn">B</button>
  <button class="btn">C</button>
  <button class="btn">D</button>
  <button class="btn">F</button>
  <button class="btn">G</button>

CSS

.btn {
    border: 1px solid #ccc;
}
.btn.active {
    border: 1px solid #000;
}

JavaScript

(function() {
    var buttons = document.getElementsByClassName('btn');
    if(buttons && buttons.length > 0) {
        for(var i=0; i < buttons.length; i++) {
            var button = buttons[i];
            button.addEventListener('click', function(e) {
                e.preventDefault();
                this.classList.toggle('active');
            });
        }
    }
})();