JSFiddle - React, Tailwind, and code Playground

HTML

<body>  
<ul id="nav">     
    <li>
        <a href="#" style="">Home</a>
    </li>
    <li>
        <a href="#">Forum</a>
    </li>
    <li>
        <a href="#" class="open">Other tab</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
</ul>      
    
    
<div id="content"> 
<div id="content_over_shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel orci mauris. Cras dui lacus, tempus eget imperdiet suscipit, commodo scelerisque nisi. Ut libero nunc, dapibus sed malesuada vitae, interdum
    </div> 
    </div>
</body>

CSS

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    -moz-box-shadow: 0px 0px 8px 2px #888;
    -webkit-box-shadow: 0px 0px 8px 2px #888;
    box-shadow: 0px 0px 8px 2px #888;
}

#content_over_shadow {
    padding: 1em;
    position: relative;
    -moz-box-shadow: 0px 0px 8px 2px #888
    -webkit-box-shadow: 0px 0px 8px 2px #888;
    box-shadow: 0px 0px 8px 2px #888;
    background:#fff;
    width: 600px;
    background-color:green;
}

#content {
    font-size: 1.8em;
    width: 600px;
    background-color:yellow;
}

body {     
    background-color: #FFF;     
    font-size: .625em;     
    margin: 0;     
    padding: 0; 
}  

#nav {     
    background-color: lightblue;     
    padding: .4em 1.2em 0 1.2em;     
    margin: 0;
    overflow: hidden;
}  

#nav li {     
    list-style: none;     
    display: inline; 
}

#nav li a:hover, #nav li a.open {     
    color: #272829;     
    text-decoration: none;     
    background-color: green; 
    z-index: 20;
}