JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="panel panel-default perspectivePanel panel-vrs">
    <div class="panel-heading heading"><span class="panel"> <span class="glyphicons glyphicons-upload rotate270 buttonBack"></span>  <span class="glyphicons glyphicons-upload rotate90 buttonFow"></span>
        
       <li class="dropdown pull-right"> <a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="true"><span class="glyphicon glyphicon-more"></span>Menu<strong class="caret"></strong></a>

    <div class="dropdown-menu custom-menu">
        <ul>
            
            
           <li><div><span class="glyphicon glyphicon-star right10" title="Make Favourite"></span>Make Favourite</div></li><li><div><span class="glyphicon glyphicon-plus right10" title="Add Content"></span>Add Content</div></li><li><div><span class="glyphicon glyphicon-floppy-disk right10" title="Save"></span>Save</div></li><li><div><span class="glyphicon glyphicon-floppy-saved right10" title="Save As"></span>Save As</div></li><li><div><span class="glyphicon glyphicon-trash right10" title="Delete"></span>Delete</div></li><li><div><span class="glyphicon glyphicon-share right10" title="Role Permissions"></span>Role Permissions</div></li><li><div><span class="glyphicon glyphicon-pushpin right10" title="Pin To Tiles"></span>Pin To Tiles</div></li>
        </ul>
    </div>
</li>
</div>
</div>

CSS

li {
    list-style:none;
}
.custom-menu {
    padding: 10px;
    min-width: 200px;
    background-color: #C40030;
    color: #fff;
}
.custom-menu ul{
    margin:0;
    padding:0;
}
.custom-menu li{
    margin-bottom:3px;
    padding: 3px;
}
.custom-menu li:last-child{
    margin-bottom:0px;
}
.custom-menu li:hover{
    background-color: #101010;
    padding: 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.custom-menu li span{
    margin-right:5px;
}