JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="work">
  <li>Work 1</li>
  <li>Work 2</li>
  <li>Work 3</li>
</ul>
<div>And</div>
<ul class="work">
  <li>Work 3</li>
  <li>Work 4</li>
  <li>Work 5</li>
</ul>

CSS

li {
  display: block;
  cursor: pointer;
}

.active {
  background-color: #00ff00;
}

JavaScript

(function() {
  var currentActiveElement;
  Array.prototype.forEach.call(document.querySelectorAll('.work li'), function(item) {
    item.addEventListener('click', function(evt) {
      currentActiveElement && currentActiveElement.classList.remove('active');
      currentActiveElement = evt.target;
      currentActiveElement.classList.add('active');
    }, false);
  });
}());