JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="gw-sidebar">
    <div id="gw-sidebar" class="gw-sidebar">
        <div class="nano-content">
            <ul class="gw-nav gw-nav-list ">
                <li class="init-un-active">
                    <a href="javascript:void(0)"> <span class="gw-menu-text">stay</span> <b class="gw-arrow"></b>
                    </a>
                </li> 
                <li class="init-arrow-down always-active">
                    <a href="javascript:void(0)"> <span class="gw-menu-text">open1</span> <b class="gw-arrow"></b> </a>
                    <ul class="gw-submenu ">
                        <li> <a href="javascript:void(0)">1x</a> </li>
                        <li> <a href="javascript:void(0)">2x</a> </li>
                        <li> <a href="javascript:void(0)">3x</a> </li>
                        <li> <a href="javascript:void(0)">X</a> </li>
                    </ul>
                </li>
                <li class="init-un-active">
                    <a href="javascript:void(0)"> <span class="gw-menu-text">stay</span> <b class="gw-arrow"></b>
                    </a>
                </li>
                <li class="init-arrow-down always-active">
                    <a href="javascript:void(0)"> <span class="gw-menu-text">open2</span> <b class="gw-arrow icon-arrow-up8"></b> </a>
                    <ul class="gw-submenu">
                        <li> <a href="javascript:void(0)">1</a> </li>
                        <li> <a href="javascript:void(0)">2</a> </li>
                        <li> <a href="javascript:void(0)">3</a> </li>
                        <li> <a href="javascript:void(0)">4</a> </li>

                    </ul>
                </li>

            </ul>
        </div>
    </div>
</div>

CSS

/*=================left navibar begin=========================================*/

.gw-container.gw-main-container .gw-sidebar.gw-sidebar-fixed,
.gw-container.gw-main-container .gw-sidebar.gw-sidebar-fixed:before { left: auto }

.gw-sidebar {
  width: 240px;
  position: fixed;
  background-color: #F2F2F2;

}

.gw-sidebar .nano-pane {
  background: rgba(255, 255, 255, 0);
  font-size: 15px;
}

.gw-sidebar .gw-nav-list { border-left: 0px solid #CCC; }

.gw-sidebar .gw-nav-list li a { padding-left: 20px; }

.gw-nav-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.gw-nav-list>li:first-child { border-top: 0; }

.gw-nav-list>li {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #fcfcfc;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  text-decoration: none;
}
 @-webkit-keyframes 
arrow-slide {  0% {
}
 100% {
-webkit-transform:rotate(225deg);
z-index:3
}
}
 @-webkit-keyframes 
arrow-slide1 {  0% {
}
 100% {
-webkit-transform:rotate(225deg);
z-index:3
}
}

.gw-nav-list>li.arrow-down:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-top: 1px solid #bababa;
  border-left: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
  -webkit-animation: arrow-slide .5s 0s ease both;
}

.gw-nav-list>li.init-arrow-down:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
}

.gw-nav-list>li.arrow-up:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
  -webkit-animation: arrow-slide1 .5s 0s ease both;
}

.gw-nav-list>li.init-arrow-up:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-top: 1px solid...

JavaScript

$(document).ready(function () {
    var nav = function () {
        $('.gw-nav > li:not(.always-active) > a').click(function () {
            var gw_nav = $('.gw-nav');
            gw_nav.find('li').removeClass('active');
            $('.gw-nav > li > ul > li').removeClass('active');

            var checkElement = $(this).parent();
            var ulDom = checkElement.find('.gw-submenu')[0];

            if (ulDom == undefined) {
                checkElement.addClass('active');
                $('.gw-nav').find('li').find('ul:visible').slideUp();
                return;
            }
            if (ulDom.style.display != 'block') {
                gw_nav.find('li').find('ul:visible').slideUp();
                gw_nav.find('li.init-arrow-up').removeClass('init-arrow-up').addClass('arrow-down');
                gw_nav.find('li.arrow-up').removeClass('arrow-up').addClass('arrow-down');
                checkElement.removeClass('init-arrow-down');
                checkElement.removeClass('arrow-down');
                checkElement.addClass('arrow-up');
                checkElement.addClass('active');
                checkElement.find('ul').slideDown(300);
            } else {
                checkElement.removeClass('init-arrow-up');
                checkElement.removeClass('arrow-up');
                checkElement.removeClass('active');
                checkElement.addClass('arrow-down');
                checkElement.find('ul').slideUp(300);

            }
        });
        $('.gw-nav > li > ul > li > a').click(function () {
            $(this).parent().parent().parent().removeClass('active');
            $('.gw-nav > li > ul > li').removeClass('active');
            $(this).parent().addClass('active')
        });
    };
    nav();
});