JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

    <div id="navbar-top"></div>
        <div id="navbar-side">
            <ul>
                <li><a href="#"><i class="fa fa-home"></i><span class="menu-text">Dashboard</span></a></li>
                <li><a href="#"><i class="fa fa-bar-chart-o"></i><span class="menu-text">Charts</span></a></li>
                <li><a href="#"><i class="fa fa-table"></i><span class="menu-text">Tables</span></a></li>
                <li><a href="#"><i class="fa fa-edit"></i><span class="menu-text">Form</span></a></li>
                <li><a href="#"><i class="fa fa-font"></i><span class="menu-text">Typography</span></a></li>
                <li><a href="#"><i class="fa fa-desktop"></i><span class="menu-text">Element</span></a></li>
                <li><a href="#"><i class="fa fa-wrench"></i><span class="menu-text">Grid</span></a></li>
                <li>
                    <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 1</span>&nbsp;<b class="fa fa-angle-left"></b></a>
                        <ul>
                            <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
                            <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
                        </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 2</span>&nbsp;<b class="fa fa-angle-left"></b></a>
                        <ul>
                            <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
                            <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
                        </ul>
                </li>
                <li><a href="#" class="minimize-menu"><i class="fa fa-chevron-circle-left"></i><span class="menu-text">Minimize Menu</span></a></li>
           ...

CSS

*{
    padding: 0;
    margin: 0;
}

body{
    min-width: 100%;
    min-height: 100%;
    padding-bottom: 0;
    color: #393939;
    font-family: sans-serif;
}

#navbar-top{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: #438eb9;
}

#navbar-side{
    width: 189px;
    height: 100%;
    margin-top: 50px;
    position: fixed;
    background-color: #f2f2f2;
    border-right: 1px solid #ccc;
}

#navbar-side ul{
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#navbar-side ul li{
    list-style: none;
    border-bottom: 1px solid #e5e5e5;
}

#navbar-side a{
    width: 100%;
    font-size: 14px;
    line-height: normal;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    display: block;
    color: #555;
    text-decoration: none;
}

#navbar-side a:hover{
    padding-left: 17px;
    background-color: #fff;
    color: #08c;
    border-left: 3px solid #08c;
}

#navbar-side ul ul{
    display: none;
}

#navbar-side ul ul li a{
    padding-left: 30px;
    border-left: none;
}

#navbar-side ul ul li a:hover{
    padding-left: 30px;
    border-left: none;
}

#navbar-side .menu-text{
    margin-left: 20px;
}

navbar-side b{
    float: right;
    margin-right: 17px;
}

JavaScript

$('#navbar-side > ul > li > a').click(function() {
          var checkElement = $(this).next();
          $('#navbar-side li a').removeClass('active');
          $(this).closest('a').addClass('active');  
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
               $(this).closest('a').removeClass('active');
               $(this).closest('a').addClass('nonactive');
               $('.nonactive b').addClass('fa-angle-left');
               $('.nonactive b').removeClass('fa-angle-down');
               checkElement.slideUp('normal');
          }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
               $(this).closest('a').removeClass('nonactive');
               $('.active b').removeClass('fa-angle-left');
               $('.active b').addClass('fa-angle-down');
               $('#navbar-side ul ul:visible').slideUp('normal');
               checkElement.slideDown('normal');
          }
          if (checkElement.is('ul')) {
               return false;
          } else {
               return true; 
          }     
     });
     $('.minimize-menu').click(function()
         {
          if ( $( this ).hasClass( "minimize-menu" ) ) 
          {
              $('.minimize-menu > i').removeClass('fa-chevron-circle-left');
              $('.minimize-menu > i').addClass('fa-chevron-circle-right');
              $('#navbar-side').css({"width":"55px"});
              $('.menu-text').css({"display":"none"});
              $('#navbar-side > ul > li > a > b').hide();
              $(this).removeClass('minimize-menu');
              $(this).addClass('maximize-menu');
          }
          else
          {
              $(this).removeClass('maximize-menu');
              $(this).addClass('minimize-menu');
              $('.minimize-menu > i').addClass('fa-chevron-circle-left');
              $('.minimize-menu > i').removeClass('fa-chevron-circle-right');
              $('#navbar-side > ul > li > a > b').show();
     ...