JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
</div>

SCSS

.items {
    display: flex;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 15px;
    background: #ccc;
    cursor: pointer;
    user-select: none;
}

.active {
    background: #aaa;
}

JavaScript

var items = document.querySelectorAll('.item');

for(var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', (function(t) { return function() {
        alert(t);
    }})(i));
}