JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//www.jqueryscript.net/demo/Simple-jQuery-Popup-Menu-Plugin-Pop-Menu/jquery.popmenu.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div id="demo_box">
<div id="pop_ctrl"><i class="fa fa-bars"></i></div>
<ul id="demo_ul">
<li class="demo_li">
<div><i class="fa fa-home"></i></div>
<div>Home</div>
</li>
<li class="demo_li">
<div><i class="fa fa-cloud"></i></div>
<div>Cloud</div>
</li>
<li class="demo_li">
<div><i class="fa fa-cog"></i></div>
<div>settings</div>
</li>
<li class="demo_li">
<div><i class="fa fa-envelope"></i></div>
<div>E-mail</div>
</li>
<li class="demo_li">
<div><i class="fa fa-clock-o"></i></div>
<div>Clock</div>
</li>
<li class="demo_li">
<div><i class="fa fa-folder"></i></div>
<div>Files</div>
</li>
<li class="demo_li">
<div><i class="fa fa-heart-o"></i></div>
<div>Favourites</div>
</li>
<li class="demo_li">
<div><i class="fa fa-mobile"></i></div>
<div>Mobile</div>
</li>
<li class="demo_li">
<div><i class="fa fa-power-off"></i></div>
<div>Exit</div>
</li>
</ul>
</div>
Hello

CSS

.demo_li{
     word-wrap: break-word;
    padding:10px;
}

#demo_ul{
    position:absolute !important;
    top:0;
    margin: 0px;
}

JavaScript

$(function(){
$('#demo_box').popmenu({
'controller': 'true',
'width': '100%',
'background': '#800000',
'focusColor': 'black',
    'borderRadius': '10px',
'top': '0',
'left': '0',
'iconSize': '50px'
});
})