JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
  <input type="radio" id="tab-0" name="list" value="0">
  <div class="list-item">
    <input type="radio" id="tab-1" name="list" value="1">
    <label for="tab-0">закрыть 1</label>
    <label for="tab-1">открыть 1</label>
    <div class="list-item-content">hello, world!!</div>
  </div>
  <div class="list-item">
    <input type="radio" id="tab-2" name="list" value="2">
    <label for="tab-0">закрыть 2</label>
    <label for="tab-2">открыть 2</label>
    <div class="list-item-content">fuck the world</div>
  </div>
  <div class="list-item">
    <input type="radio" id="tab-3" name="list" value="1">
    <label for="tab-0">закрыть 3</label>
    <label for="tab-3">открыть 3</label>
    <div class="list-item-content">fuck everything</div>
  </div>
</div>

CSS

.list {
  display: flex;
}

.list-item label {
  display: inline-block;
  margin: 10px;
  padding: 5px;
  border: 1px solid silver;
}

.list input[type="radio"] {
  display: none;
}

.list input[type="radio"] + label {
  background: red;
  color: white;
  display: none;
}

.list input[type="radio"]:checked + label {
  display: inline-block;
}

.list input[type="radio"]:checked + label + label {
  display: none;
}

.list-item-content {
  display: none;
  position: absolute;
  padding: 10px;
  top: 70px;
  left: 20px;
  border: 1px solid silver;
}

.list input[type="radio"]:checked ~ .list-item-content {
  display: inline-block;
}