JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <div class="menu-item">
    <input type="radio" name="menu" id="menu-1">
    <label for="menu-1" class="date">
      дувая часть
    </label>
       <a href="#content-1" class="text">
    правая часть
      </a>
  </div>
  <div class="menu-item">
    <input type="radio" name="menu" id="menu-2">
    <label for="menu-2" class="date">
      дувая часть
    </label>
       <a href="#content-2" class="text">
    правая часть
      </a>
  </div>
  <div class="menu-item">
    <input type="radio" name="menu" id="menu-3">
    <label for="menu-3" class="date">
      дувая часть
    </label>
       <a href="#content-3" class="text">
    правая часть
      </a>
  </div>
</div>
<div class="content">
  <div id="content-1" class="box">контент 1</div>
  <div id="content-2" class="box">контент 2</div>
  <div id="content-3" class="box">контент 3</div>
</div>

CSS

.menu {
  padding: 5px;
  border: 1px solid #ccc;
  width: 300px;
}
.menu-item {
  box-sizing: border-box;
  overflow: hidden;
}
.menu-item > input {
  display: none;
}
.date,.text {
  float:left;
  box-sizing: border-box;
}
.date {
  width: 30%;
}
.text {
  width: 70%;
}

.menu-item input:checked + .date {
  color: blue;
}
.menu-item input:checked + .date + .text {
  background-color: blue;
  color: #fff;
}
.menu-item:hover .date {
  color: #ccc;
}
.menu-item:hover .text {
  background-color: #ccc;
  color: #fff;
}
.content .box {
  display: none;
}
.box:target {
  display: block;
}