JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <p>change my color1</p>
</div>
<div class="test">
  <p>change my color2</p>
</div>
<div class="test">
  <p>change my color3</p>
</div>
<div class="test">
  <p>change my color4</p>
</div>
<div class="test">
  <p>change my color5</p>
</div>
<div class="test">
  <p>change my color6</p>
</div>
<button id="button1">ttt
</button>

CSS

.color1 {
  background-color: #CCC;
}

JavaScript

var bn = document.getElementById("button1");
bn.addEventListener("click", changeColor);


function changeColor() {
var str = document.getElementsByClassName('test');
  while (str.length) {
    str[0].className = ("color1");
  }
}