JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item-layout">1</div>
<div class="item-layout">2</div>
<div class="item-layout">3</div>
CSS
.item-layout{
width: 50px;
height: 50px;
color: #fff;
background: red;
margin: 10px
}
.item-layout.active-bg{
background: black;
}
JavaScript
let blockClick = document.querySelectorAll('.item-layout')
const addClass = (e) => {
blockClick.forEach(block => {
block.classList.remove('active-bg')
})
e.target.classList.add('active-bg');
}
for (let i = 0; i < blockClick.length; i++) {
blockClick[i].addEventListener('click', addClass)
}