JSFiddle - React, Tailwind, and code Playground

by MItul Patel

HTML

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">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;
 }

JavaScript

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for(i=0;i<blockSetLength;i++){
    blockSet[0].className = "block-selected";
}