JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
      <h1 id="header">List</h1>
      <h2>Buy Greoceries</h2>
      <ul>
         <li id="one" class="hot"><em>Fresh</em>figs</li>
         <li id="two" class="hot">pine nuts</li>
         <li id="three" class="hot">honey</li>
         <li id="four">balsamic vinegear</li>
     </ul>
   </div>

CSS

*{
  box-sizing: border-box;
}
.hot {
  background-color: red;
  border: 1px solid black;
  padding: 10px;
  margin-top: 1px;
  font-size: 25px;
  list-style-type: none;
}

.cool {
  background-color: blue;
  padding: 10px;
  color: white;
  font-size: 25px;
}

JavaScript

var elements = document.querySelectorAll('.hot');
var i;

for(i = 0; i < elements.length; i++) { 
  elements[i].className = 'cool';
}