JSFiddle - React, Tailwind, and code Playground

HTML

<div class="socialobes basis">
		<a href="#"><h2>Социальное обеспечение</h2></a>
  <ul>
   <li>подъёмные</li>
<li>индексация материнского капитала</li>
<li>бесплатная юридическая помощь многодетным семьям</li>
<li>оплата учебы материнским капиталом</li>
<li>социальные гарантии сотрудника полиции</li>
<li>инвалидность по зрению</li>
<li>медико социальная экспертиза</li></ul>
       <span class="openli">показать все</span>
     
       <div class="openall">

        <ul><li>социальная стипендия</li>
<li>бесплатная юридическая помощь детям сиротам</li>
<li>выдача земельного участка многодетным семьям</li>
<li>инвалидность по слуху</li>
<li>право социального обеспечения</li>
<li>документы для оформления материнского капитала</li>
<li>программа молодой специалист на селе</li>
<li>выплаты за третьего ребенка в 2017 году</li>
<li>выплаты на третьего ребенка</li>
<li>родовой сертификат на первого ребенка</li>
<li>признание малоимущим</li>
<li>квота на операцию</li>
<li>обналичивание материнского капитала</li>
<li>региональный материнский капитал</li>
<li>пенсии и пособия</li>
<span class="closeli">скрыть</span>
</ul>
 </div>
</div>	
<div class="socialobes basis">
		<a href="#"><h2>Социальное обеспечение</h2></a>
  <ul>
   <li>подъёмные</li>
<li>индексация материнского капитала</li>
<li>бесплатная юридическая помощь многодетным семьям</li>
<li>оплата учебы материнским капиталом</li>
<li>социальные гарантии сотрудника полиции</li>
<li>инвалидность по зрению</li>
<li>медико социальная экспертиза</li></ul>
       <span class="openli">показать все</span>
     
       <div class="openall">

        <ul><li>социальная стипендия</li>
<li>бесплатная юридическая помощь детям сиротам</li>
<li>выдача земельного участка многодетным семьям</li>
<li>инвалидность по слуху</li>
<li>право социального обеспечения</li>
<li>документы для оформления материнского капитала</li>
<li>программа молодой специалист на селе</li>
<li>выплаты за третьего ребенка в 2017 году</li>
<li>выплаты на третьего...

CSS

.fa-enter{
	opacity: 0;
}

.fa-enter-active{

	transition: opacity 1s;
}
.fa-leave-active{
	transition: opacity 1s;
	opacity:0
  }
  .displayblock{
	display:block;

}
.displaynone{
display: none;
}

JavaScript

func