JSFiddle - React, Tailwind, and code Playground

by stuartsd

HTML

<div id="wrapper">
<div id="box" class="active" onclick="func(this)"></div>
<div id="box" onclick="func(this)"></div>
<div id="box" onclick="func(this)"></div>
<div id="box" onclick="func(this)"></div>
</div>

CSS

#box { 
  float: left;
  width: 20%; 
  margin: 5px; 
  height: 50px; 
  width: 50px; 
  background-color: blue;
}

.active { height: 200px !important; width: 200px !important; background-color: red; }

JavaScript

function func(elem) {
    var elements = document.getElementById('box');
    for (i = 0; i < elements.length; i++) {
        elements[i].classList.remove('active')
    }
    elem.classList.add('active');
}