JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div class="klik">Klik</div>
<div class="klik">Klik</div>
<div class="klik">Klik</div>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.klik {
  background: #333;
  padding: 10px 20px;
  text-align: center;
  border: 1px solid #000;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  width: 33.333333%;
  float: left;
  border-left: 0;
}

.klik:first-child {
  border-left: 1px solid #000;
}

.klik.active {
  background: #ddd;
  color: #555;
  border-color: #ccc;
}

JavaScript

var container = document.getElementsByClassName("klik");
for (var i = 0, l = container.length; i < l; i++) {
  container[i].onclick = function() {
    for (var j = 0; j < l; j++) {
      if (container[j] != this) {
        container[j].classList.remove("active");
      }
    }
    this.classList.toggle('active');
  }
}