JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
 <div class="fir">
     <span class="span1">step <span>one</span></span>
     <span class="span2">step <span>two</span></span>
 </div>
  <li><div class="q1">background <span>&#x2228</span></div>
  <div class="q2"></div>
  </li>
  <li><div class="q1">logo <span>&#x2228</span></div>
  <div class="q2"></div>
  </li>
  <li><div class="q1">text <span>&#x2228</span></div>
  <div class="q2"></div>
  </li>
  <li><div class="q1">buttons <span>&#x2228</span></div>
  <div class="q2"></div>
  </li>
  <li><div class="q1">display <span>&#x2228</span></div>
  <div class="q2"></div>
  </li>
   <li><div class="q1">options <span>&#x2228</span></div>
  <div class="q2"></div>
  </li>
  
</ul>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;      
}
ul{
    font: 16px Arial;
    color: #E0DFDF;
    padding:0;
    width:220px;
    height: 662px;
    background:#303030;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
}
.fir{
    background: #232222;
    border-bottom: 2px #393939 solid;
    font-size: 0;
}
.fir>span{
    font-size: 15px;
    display: inline-block;
    width: 50%;
    text-align: center;
    line-height: 59px;
}
.span1{  
    border-bottom: 4px #0EC472 solid;
}
.span1 span{
    color: #908F8F;
}
.span2{  
    color: #5E5D5D;
}
.span2 span{  
    color: #434242;
}
li{
    display:block;
    border-bottom: 2px #393939 solid;
}
.q1{
    font-size: 13px;
    padding: 0 10px;
    line-height:50px;
}
.q1 span{
    float: right;
    margin-right: 5px;
    font-weight: 600;
}
.q2{
    height:200px;
    background:#232222;
    display:none;
}

JavaScript

$(document).ready(function(){ 

var a; 
$('.q1').click(function(){ 
    $(this).next().stop(0,0);
        
      if($('.q1').next().is(':visible')){
      $('.q1').next().stop(1,1).slideUp();
          $('.q1').children().css({transform:"rotate(0deg)"});
      $('.q1').css({'background':'#303030', 'color':'#E0DFDF'});
    }
if($(this).next().is(':hidden'))
    a=1;

var $b=$(this); 
var $a=$(this).next(); 
var $c = $b.find("span"); 
$($b).css({'background':'#232222', 'color':'#149559'}); 

$a.stop().slideToggle(400,function(){ 
if($a.is(':hidden')){ 
$($b).css({'background':'#303030', 'color':'#E0DFDF'});} 
}); 
if(a!=0){ 
$c.css({transform:"rotate(180deg)", transition: ".4s transform", color:'#E0DFDF'}); 
a=0; 
} 
else{ 
$c.css({transform:"rotate(0deg)"}); 
a=1; 
} 
}); 
    
});