JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>

CSS

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

React

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      const classNameArr = this.className.split(' ');
      if(classNameArr.indexOf('selected') > -1) {
        classNameArr.pop();
        this.className = classNameArr.join(' ');
      } else {
        classNameArr.push('selected')
        this.className = classNameArr.join(' ');
      }
      console.log(this.className);
    });
  }
}