JSFiddle - React, Tailwind, and code Playground

HTML

<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="box">Box</li>
        <li class="nav-item tab">
            <a tab="tab2" tab-id="2" class="tab">Tab 2</a>
        </li>
        <li class="box">Box</li>
        <li class="nav-item tab">
            <a tab="tab3" tab-id="3" class="tab">Tab 3</a>
        </li>
        <li class="box">Box</li>
        <li class="nav-item tab">
            <a tab="tab4" tab-id="4" class="tab">Tab 4</a>
        </li>
        <li class="box">Box</li>
        <li class="nav-item">
            <a href="#" class="new-tab">Add New...</a>
        </li>
        <li class="box">Box</li>
    </ul>
</div>

CSS

li.nav-item:hover + .box, .box:hover {
    display: block;
}
.box {
    display: none;
    list-style: none;
    width: 120px;
    height: 70px;
    border: 1px solid #CCC;
    opacity: 0.3;
    background: #EEE;
}
.box:hover {
    opacity: 1;
}