JSFiddle - React, Tailwind, and code Playground

HTML

<article  class="needreg">
                                <div  class="bidfaq posrel">
                                	<header>
                                    	Помощь
                                    </header>
                                    <article class="faqlistarea">
                                    	<ul class="p1">
                                        <li class="header">Подача заявки:</li>
                                        	<li class="libut regus">Регистрация</li>
                                            <li class="libut reqbid">Требования к заявке</li>
                                            <li class="libut stau">Steam авторизация</li>
                                            <li class="libut sny">Поля: Имя и Возраст</li>
                                            <li class="libut sexp">Дополнительное поле: Опыт игры</li>
                                            <li class="libut sab">Дополнительное поле: О себе</li>
                                        </ul>
                                        <ul class="p2">
                                        <li class="header">Проверка заявки:</li>
                                        	<li class="libut pplres">Голосование</li>
                                            <li class="libut lvlres">Оценка уровня игрока</li>
                                            <li class="libut timeres">Время проверки</li>
                                        </ul>
                                        <ul class="p3">
                                        <li class="header">Статусы заявки:</li>
                                        	<li class="libut bidacc">Одобрена</li>
                                            <li class="libut biddis">Отклонена</li>
                                            <li class="libut bidblock">Забанена</li>
                                            <li class="libut bidapp">Подача апелляции</li>
                                        </ul>
 ...

CSS

#inner article.needreg{
	height:280px;
}
.bidfaq{
	float:left;
	margin:10px;
	width:200px;
}
	.bidfaq > header{
		color:black;
		text-align:center;
	}
	.bidfaq > article.faqlistarea{
		border:1px solid #363636;
		height:240px;
		width:198px;
	}
		.bidfaq > article > ul{
			font-size:11px;
			list-style:square;
			margin:0px 0px 0px 5px;
			padding:0px;
		}
			.bidfaq > article > ul > li{
				margin-left:15px;
			}
			.bidfaq > article > ul > li.header{
				cursor:default;
				list-style:none;
				margin-left:0px;
				font-size:13px;
			}
			.bidfaq > article > ul > li.libut{
				cursor:pointer;
			}
			.bidfaq > article > ul > li.libut:hover{
				color:#DE8F26;
			}

.needreqforbid{
	padding:10px 10px;
	text-align:center;
	margin-left:220px;
	width:530px;
}

.faqinfobox{
	border:1px solid black;
	background:#585858;
	display:none;
	font-size:12px;
	text-align:justify;
	padding:5px 10px;
	margin-left:220px;
	height:auto;
	width:530px;
}
	.faqinfobox .arr{
		background-image:url(arrleft.png);
		height:10px;
		width:10px;
	}
		.faqinfobox.regus.unreg .arr{
			margin:6px 0px 0px -21px;
		}
		.faqinfobox.reqbid.unreg .arr{
			margin:20px 0px 0px -21px;
		}
		.faqinfobox.stau.unreg .arr{
			margin:34px 0px 0px -21px;
		}
		.faqinfobox.sny.unreg .arr{
			margin:48px 0px 0px -21px;
		}
		.faqinfobox.sexp.unreg .arr{
			margin:62px 0px 0px -21px;
		}
		.faqinfobox.sab.unreg .arr{
			margin:76px 0px 0px -21px;
		}
		.faqinfobox.pplres.unreg .arr{
			margin:107px 0px 0px -21px;
		}
		.faqinfobox.lvlres.unreg .arr{
			margin:121px 0px 0px -21px;
		}
		.faqinfobox.timeres.unreg .arr{
			margin:135px 0px 0px -21px;
		}
		.faqinfobox.ifacc.unreg .arr{
			margin:164px 0px 0px -21px;
		}
		.faqinfobox.ifdis.unreg .arr{
			margin:178px 0px 0px -21px;
		}
		.faqinfobox.ifblock.unreg .arr{
			margin:93px 0px 0px -21px;
		}
		.faqinfobox.ifblock.unreg{
			margin-top:100px;
		}
		.faqinfobox.bidapp.unreg .arr{
			margin:93px 0px 0px -21px;
		}

JavaScript

$(document).ready(function(){
	$('.libut').click(function(){
        $('.faqinfobox').hide();
    });
	
	
	$('.libut.regus').click(function(){
        $('.faqinfobox.regus').fadeIn();
    });
	$('.libut.reqbid').click(function(){
        $('.faqinfobox.reqbid').fadeIn();
    });
	$('.libut.stau').click(function(){
        $('.faqinfobox.stau').fadeIn();
    });
	$('.libut.sny').click(function(){
        $('.faqinfobox.sny').fadeIn();
    });
	$('.libut.sexp').click(function(){
        $('.faqinfobox.sexp').fadeIn();
    });
	$('.libut.sab').click(function(){
        $('.faqinfobox.sab').fadeIn();
    });
	
	$('.libut.pplres').click(function(){
        $('.faqinfobox.pplres').fadeIn();
    });
	$('.libut.lvlres').click(function(){
        $('.faqinfobox.lvlres').fadeIn();
    });
	$('.libut.timeres').click(function(){
        $('.faqinfobox.timeres').fadeIn();
    });
	
    $('.libut.bidacc').click(function(){
        $('.faqinfobox.ifacc').fadeIn();
    });
	$('.libut.biddis').click(function(){
        $('.faqinfobox.ifdis').fadeIn();
    });
	$('.libut.bidblock').click(function(){
        $('.faqinfobox.ifblock').fadeIn();
    });
	$('.libut.bidapp').click(function(){
        $('.faqinfobox.bidapp').fadeIn();
    });
});