JSFiddle - React, Tailwind, and code Playground

HTML

<div class="default">
</div>
<div class="default">
</div>

CSS

div {
  height:50px;
  width:50px;
}
.default {
  background-color:black;
}
.red {
  background-color:red;
}

JavaScript

var list = document.getElementsByClassName("default");
console.log(list.length);
for(var i = 0; i < list.length; i++)
{
  console.log(i);
  list[i].classList.add("red");
  list[i].classList.remove("default");
}