JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
   <p>БЛОК-1!</p>
</div>
<div class="test">
   <p>БЛОК-2!</p>
</div>
<div class="test">
   <p>БЛОК-3!</p>
</div>
<div class="test">
   <p>БЛОК-4!</p>
</div>
<div class="test local">
   <p>БЛОК-5!</p>
</div>
<div class="test">
   <p>БЛОК-6!</p>
</div>
<div class="test">
   <p>БЛОК-7!</p>
</div>
<div class="test local">
   <p>БЛОК-8!</p>
</div>
<div class="test">
   <p>БЛОК-1300!</p>
</div>

CSS

.test{
    display:block;
    text-align:center;
    margin:10px 10px;
    width: 100px;
    height: 100px;
    background: #333;
    color: #fff;
    font-weight: bold;
    float:left;
    cursor:pointer;
}

.local-updates {
  background-color: purple;
}

p{
  line-height: 50px;
}

JavaScript

var nodelist = document.querySelectorAll('.test.local');
var len = nodelist.length;
var i;

for(i = 0; i < len; i++) {
nodelist[i].classList.add('local-updates');
}