JSFiddle - React, Tailwind, and code Playground
HTML
<div class="hws-css-filter">
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
</div>
<div class="hws-css-filter-tr">
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div class="hws-css-filter-td"></div>
<div...
CSS
.hws-css-filter {
display: table;
//border:1px solid #000;
margin: auto;
vertical-align: middle;
}
.hws-css-filter-tr {
display: table-row;
padding: 0;
margin: 0;
}
.hws-css-filter-td {
display: table-cell;
border: 1px solid #000;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
vertical-align: middle;
padding: 0;
margin: 0;
font-family: monospace;
font-size: 10px;
text-transform: uppercase;
cursor: pointer;
}
.selected {
background-color: blue;
}
JavaScript
$('.hws-css-filter-td').click(function() {
$(this).siblings().removeClass('selected');
$(this).toggleClass('selected');
});