JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

CSS

body { font-family: sans-serif }

li {
  list-style-type: none;
  border: 1px solid #000;
  padding: 4px;
  margin: 4px;
  border-radius: 8px;
  cursor: pointer;
}

li.selected {
  color: #666; 
  font-weight: bold;
  border-color: #999;
  outline: 2px solid #ddd;
}

JavaScript

const $ = (selector) => document.querySelectorAll(selector)

function select(evt) {
	$("li").forEach(li => li.className = "")
    
  evt.target.className = "selected"
}

$("li").forEach(li => li.addEventListener("click", select))