JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div id="container">
    
    <div id="main">
      
      <h1>Main Content</h1>
      
    </div>
    
    <div id="footer">
      <div class="gradient"></div>
      <ul id="menu">
        <li>
          
          <div>Menu</div>
            					
          <ul>
             <li>Sub Menu 1</li>
			 <li>Sub Menu 2</li>
          </ul>				

        </li>
      </ul>				
      
    </div>
    
  </div>
  
</body>
</html>

CSS

#main {
  background: green; 
  padding: 10px;
  min-height: 400px; 
}

#footer {
  position: relative;
  height: 50px;
  width: 100%;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: -webkit-linear-gradient(top, #03477a 0%, #56a0ce 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#03477a, endColorstr=#56a0ce, GradientType=0);
}

#footer #menu {
  width: 100px; 
  background: transparent;
  border: 0;
}

#footer #menu li {
   list-style: none;
   display: inline-block;  
}

#footer #menu li ul {   
   background: red; 
}

JavaScript

$(document).ready(function(){
  
  $('#menu').kendoMenu({ direction: "top left" });
  
});