JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
         <li class='last'><a href='#'><span>Product 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>About</span></a>
      <ul>
         <li><a href='#'><span>Company</span></a></li>
         <li class='last'><a href='#'><span>Contact</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div class="section1">
									<div class="col-lg-1">
										<div class="alert alert-info1">
											<i class="fa  fa-pencil textTrans"></i><b>&nbsp; </b>Informations&nbsp;
										</div>
									</div>
									
									<h1>A first glimpse at Java 9: early access release of JDK9 on OpenJDK</h1>
									<p>Just when you thought JDK development had entered a summer low after the prolonged hype surrounding Java 8, word of JDK 9 has begun to spread. While some developers are still fathoming the depths of new Java 8 features, other parts of the Java community are already abuzz with Java 9 rumours, requests and excitement.
									<a target="_blank" href="http://jaxenter.com/a-first-glimpse-at-java-9-early-access-release-of-jdk9-on-openjdk.1-50855.html">Read More</a>
									</p>
									<br>
									<h1>Microsoft and Java: Internet Explorer’s next patch to block old Java ActiveX plugins</h2>
									<p>Internet Explorer (IE) has announced a new crackdown on old Java plugins, the Microsoft browser announced via its blog. IE’s monthly Patch Tuesday updates will soon begin blocking browser enemy no. 1: vulnerable old ActiveX.

										The security ‘feature’ will begin sending security warnings to users on sites that attempt to load out-of-date  Java ActiveX controls.
									<a target="_blank"...

CSS

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 250px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 3px;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    position:absolute;
    top:0;
    left:-258px;
    transition:left 1s ease-in-out;
}
#cssmenu.menuSlide{
    left:0px;
}
.menu{
    width:100px;
    text-align:center;
    background-color:grey;
    display:block;
    border-radius:4px;
}
.menu :hover{
    cursor:pointer;
}

.menu p{
    color:white;
    padding:10px;
}

#cssmenu > ul > li {
  margin: 0 0 2px 0;
}
#cssmenu > ul > li:last-child {
  margin: 0;
}
#cssmenu > ul > li > a {
  font-size: 15px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu > ul > li > a > span {
  display: block;
  border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  background: #97be10;
  background: -moz-linear-gradient(#97be10 0%, #79980d 100%);
  background:...

JavaScript

$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
    $('.menu').on("click", function() {
        if ( $('#cssmenu').hasClass('menuSlide') ) {
                $('#cssmenu').removeClass('menuSlide');
        } else {
            $('#cssmenu').addClass('menuSlide');
        }
    });
});