JSFiddle - React, Tailwind, and code Playground

HTML

<button class="accordion">Раздел 1</button>
<div class="panel">
  <a href="#">Мои потоки</a>
  <a href="#">Непрочитанное</a>
  <a href="#">Базовые фигуры</a>
</div>
<button class="accordion">Раздел 2</button>
<div class="panel">
  <a href="#">Мои потоки</a>
  <a href="#">Непрочитанное</a>
  <a href="#">Базовые фигуры</a>
</div>
<button class="accordion">Раздел 3</button>
<div class="panel">
  <a href="#">Мои потоки</a>
  <a href="#">Непрочитанное</a>
  <a href="#">Базовые фигуры</a>
</div>
<button class="accordion">Раздел 4</button>
<div class="panel">
  <a href="#">Мои потоки</a>
  <a href="#">Непрочитанное</a>
  <a href="#">Базовые фигуры</a>
</div>

CSS

button.accordion{
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-family: 'OpenSans-Bold';
	font-size: 12px;
	color: #4f5b60;
}
button.accordion:hover{
	text-decoration: underline;
}
button.accordion:before{
	content: '';
	position: relative;
	top: 3px;
	display: inline-block;
	margin-right: 10px;
	width: 16px;
	height: 16px;
	background-position: 0 -250px;
}
div.panel{
	margin-left: 12px;
	margin-top: -3px;
	margin-bottom: -4px;
	padding: 35px 0 35px 25px;
	border-left: 2px solid #4f5b60;
}
div.panel a{
	display: block;
	padding: 4px 5px;
	font-size: 12px;
	text-decoration: none;
	color: #4f5b60;
	overflow: hidden;
}
div.panel a:hover,
div.panel a.current{
	background: #4f5b60;
	color: #fff;
}