JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dim"></div>
<ul>
    <div class="link"><li>Home</li></div>
    <div class="link"><li>Home</li></div>
    <div class="link"><li>Home</li></div>
    <div class="link"><li>Home</li></div>
</ul>

Some text here

CSS

.link {
    z-index: 700;
    list-style-type: none;
    padding: 0.5em;
    background: black;
    display: inline-block;
    cursor: pointer;
    color: white;
}
.dim {
    width: 100%;
    height: 100%;
    z-index: -6;
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}

body
{
    background-color:orange;
}

JavaScript

$('.link').hover(function(){
    $('.dim').fadeIn(200);
},function(){
    $('.dim').fadeOut(200);
});