JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="sidebar-wrapper">
  
 
        <div class="menu-list-sect2" id="menu-list2">
            <div class="menu-list-sect2-scroll" id="mainMenu">
                <div>
                    <div class="menu-group" data-toggle="collapse" data-target="#gwt-uid-58" aria-expanded="true"><span class="glyphicon glyphicon-magnet remain" title="Connectors"></span> 
                        <div class="link-arrow"> <span class="link" title="Connectors">Connectors</span>  <span class="glyphicon glyphicon-chevron-right pull-right Rarrow"></span> 
                        </div>
                    </div>
                    <ul class="collapse in" id="gwt-uid-58" aria-expanded="true">
                        <li class="edit_hover_class"><span class="list-menu"><span></span> 
                            <p title="Connector Definitions" class="scroll-left">Connector Definitions</p>
                            </span><span class="glyphicon glyphicon-plus list-menu-sec-icon"></span>
                        </li>
                        <li class="edit_hover_class"><span class="list-menu"><span></span> 
                            <p title="RecordSet Definitions" class="scroll-left">RecordSet Definitions</p>
                            </span><span class="glyphicon glyphicon-plus list-menu-sec-icon"></span>
                        </li>
                        <li class="edit_hover_class"><span class="list-menu"><span></span> 
                            <p title="Data Source Definitions" class="scroll-left">Data Source Definitions</p>
                            </span><span class="glyphicon glyphicon-plus list-menu-sec-icon"></span>
                        </li>
                    </ul>
                    <div class="menu-group" data-toggle="collapse" data-target="#gwt-uid-67"><span class="glyphicon glyphicon-leaf remain" title="Components"></span> 
                        <div class="link-arrow"> <span class="link" title="Components">Components</span>  <span class="glyphicon...

CSS

.popMenu{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    min-width: 160px;
    width: 160px;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    background-clip: padding-box;
    display: block;
    clear: both;
    font-Family: 'Helvetica Neue', Helvetica, Arial, sans-serif!important;
    
}
.popMenu p{
    padding: 7px 0px 6px 8px;
    margin: 0;
}
.popMenu p:hover{
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    background-color: #428bca;
}

JavaScript

$('.menu-group').click(function(){
    $(".menu-group").attr("data-toggle", "");
    var newTarget = $(this).data('target')
	$('.popMenu').html($(newTarget ).html());
    $('.popMenu .glyphicon').hide()
     $(".popMenu").css( {position:"absolute", top:event.pageY, left: event.pageX});
})