JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li data-item="a" class="selected">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 }

ul { padding-left: 0px; }

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

li.selected {
  color: #126b2a; 
  background-color: #e4f2e8;
  font-weight: bold;
  border-color: #999;
  outline: 2px solid #bfe0c8;
}

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

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

JavaScript

const fea = (selector, fn) => document
	.querySelectorAll(selector)
  .forEach(e => fn(e))

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

fea("li", li => li.addEventListener("click", select))