JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<header>
    <div id="logo">logo</div>
</header>
<section>
    <nav>
        <a>link</a>
        <a>link</a>
        <a>link</a>
        <a>link</a>
        <a>link</a>
    </nav>
</section>

CSS

header {
    height:50px;
    background:rgba(255,0,0,0.5);
}
header #logo {
    position:relative;
    width:150px;
    height:60px;
    margin-left:25px;
    background:#F00;
    z-index:0;
}
nav {
    background:rgba(0,255,0,0.5);    
}
nav a {
    display:inline-block;
    padding:10px;
    /* These two lines are your problem, remove them for your fix */
    position:relative;
    z-index:1;
}
nav a:hover {
    background:#0F0;
    cursor:pointer;
}