JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div class="covid-19">covid-19</div>
<div class="covid-19">covid-19</div>
<div class="covid-19">covid-19</div>

CSS

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

.covid-19 {
  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;
}

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

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

JavaScript

var container = document.getElementsByClassName("covid-19");
for (var i = 0; i < container.length; i++) {
  //For each element in the container array, add an onclick event.
  container[i].onclick = function(event) {
    this.classList.toggle('active');
  }
}