JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

CSS

.red {
  color: red;
}

ul {
  cursor: pointer;
}

JavaScript

const elements = Array.from(document.querySelectorAll('li'));

elements.forEach((element) => {
  element.addEventListener('click', (event) => {
  	elements.forEach((item) => {
      item.classList.remove('red');
    });
    
    element.classList.add('red');
  });
});