JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-accordion">
			<div class="main-title-accordion">тестовый аккардион</div>
			
			<div class="block-accordion">
				<div class="title-accordion">Основы языка и как на нём говорить правильно</div>
				<div class="main-item-accordion">
					<ul class="item-accordion">
						<li>Лексическая структура</li>
						<li>Типы данных, значения и переменные</li>
						<li>Выражения и операторы инструкции</li>
					</ul>
				</div>
			</div>
		</div>
    <script>
    var item = document.querySelector(".title-accordion");
var mainIitemAaccordion = document.querySelector(".main-item-accordion");

item.addEventListener("click", function accordion(){
	mainIitemAaccordion.style.display="block";
});
    </script>

CSS

/* Styles go here */

body{
	display: flex;
	justify-content:center;
	align-items: center;
}

ul{
	padding:0;
	margin:0;
	list-style:none;
}

.main-accordion {
	width: 460px;

}

.block-accordion{
  position: relative;

}

.main-item-accordion{
	padding-top: 60px;
	padding-bottom: 10px;
	padding-left:20px;
	background: #e7e7e7;
	border-radius: 30px;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	box-sizing:border-box;
	display: none;
}

.title-accordion:nth-child(2n+1){
	background: #4e4e4e;
	color: white;
	padding: 16px 20px;
	border-radius: 30px;
	font-size: 15px;
	position: relative;
	z-index:2;
}

.title-accordion:hover{
	cursor: pointer;
}

.item-accordion li{
	padding-bottom: 5px;
}
.item-accordion li:last-child{
	padding-bottom:0;
}