JSFiddle - React, Tailwind, and code Playground

HTML

<span id="controls">
         <a href="#" id="c1">control 1</a>
         <a href="#" id="c2">control 2</a>
         <a href="#" id="c3">control 3</a>
         <a href="#" class="close">close</a>
      </span>
      <div id="nav-menu">
         <div class="tab-control-menu">some action items</div>
         <ul id="tab-list">
            <li class="nav-item tab">
               <a tab="tab1" tab-id="1" class="selected tab">Tab 1</a>
            </li>
            <li class="nav-item tab">
               <a tab="tab2" tab-id="2" class="tab">Tab 2</a>
            </li>
            <li class="nav-item tab">
               <a tab="tab3" tab-id="3" class="tab">Tab 3</a>
            </li>
            <li class="nav-item tab">
               <a tab="tab4" tab-id="4" class="tab">Tab 4</a>
            </li>
            <li class="nav-item">
               <a href="#" class="new-tab">Add New...</a>
            </li>
         </ul>
      </div>

CSS

#controls{display: none; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #eee; padding: 20px 5px;}
         #controls a{opacity: 0.3}
         #controls a:hover{background:#eee}
         #controls .close{font-size: small; background: #000; padding: 3px; color:#fff}
         #nav-menu .tab{width: 100px; background:#ffc}

JavaScript

$(function () {
            var controls = $('#controls');

            controls.hover(function(){
               $('a', $(this)).css('opacity', 1);
            },function(){
               $('a', $(this)).css('opacity', 0.3);
            });

            function hideControls(){
               controls.fadeOut('fast');
            }

            $('.close', controls).click(function(){
               hideControls();
            })

            $('.nav-item').hover(function(){
               var off = $(this).offset()
               controls.css({
                  opacity: 1,
                  display: 'block',
                  left: off.left + 20,
                  top: off.top + 20
               });
            }, function(){

            })
         })