JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
  <li class="list-item">1</li>
  <li class="list-item">2</li>
  <li class="list-item">3</li>
</ul>

CSS

.list-item {
  display: inline-block;
  padding: 5px 10px;
  color: gray;
  cursor: pointer;
  border: 1px solid grey;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.list-item.active {
  color: red;
}

JavaScript

var items = $(".list-item");

items.click(function() {
  items.removeClass('active');
  $(this).addClass('active');
})