JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-default some-red">BLOCK1</div>
<div class="block-default some-red">BLOCK2</div>
<div class="block-default some-red">BLOCK3</div>
<div class="block-default some-red">BLOCK4</div>
<div class="block-default some-red">BLOCK5</div>
<div class="block-default some-red">BLOCK6</div>
<div class="block-default some-red">BLOCK7</div>
<div class="block-default some-red">BLOCK8</div>

CSS

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }
.some-red{
 color:red;   
}
}

JavaScript

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
for(var i=0;i<blockSetLength;i++){
    blockSet[0].classList.add('block-selected');
    blockSet[0].classList.remove('block-default');  
}