JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab">
  <div class="hoge" tabindex="1">
    <p class="item-name">Section 1</p>
    <p class="description">description 1</p>
  </div>

  <div class="hoge" tabindex="2">
    <p class="item-name">Section 2</p>
    <p class="description">description 2</p>
  </div>

  <div class="hoge" tabindex="3">
    <p class="item-name">Section 3</p>
    <p class="description">description 3</p>
  </div>
</div>

<input type="text" value="Section 1" id="input-item">
<input type="text" value="description 1" id="input-description">

CSS

.tab:not(:focus-within) > .hoge:first-child,
.hoge:focus {
  background: red;
}