JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li data-item="a">a</li>
  <li data-item="b">b</li>
  <li data-item="c">c</li>
</ul>

<div id="details">
  <div data-detail="a" class="selected">
    This is A
  </div>
  <div data-detail="b">
    This is B
  </div>
  <div data-detail="c">
    This is C
  </div>
</div>

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;
}

div[data-detail] {
  display: none;
}

div[data-detail].selected {
  display: block;
}

JavaScript

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

function select(evt) {
	$("li").forEach(li => li.className = "")
  $("#details div").forEach(div => div.className = "")
    
  evt.target.className = "selected"
  const selected = evt.target.getAttribute("data-item")
  $(`#details div[data-detail='${selected}']`)
    .forEach(d => d.className = "selected")
}

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