JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="header">
    
    <ul id="menu">
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor</a></li>
        <li><a href="#">Sit</a></li>
        <li><a href="#">Amet</a></li>
    </ul>
    
</div>

<div id="header1">
    
    <ul id="menu">
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor</a></li>
        <li><a href="#">Sit</a></li>
        <li><a href="#">Amet</a></li>
    </ul>
    
</div>

CSS

#header,
#header1 {
    background: url('http://placekitten.com/g/400/127') no-repeat top left;
    width: 400px;
    height: 127px;
}

#menu {
    width: 400px;
    margin: 60px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    background: rgba(0, 0, 0, 0.5);
    float: left;
}

#menu li { float: left; }

#menu a {
    float: left;
    color: #ffffff;
    text-decoration: none;
    padding: 20px;
}

#menu a:hover {
    background: rgba(255, 255, 255, 0.2);
}

#header1 { margin: 10px 0px 0px 0px; }
#header1 #menu, #header1 #menu a:hover { background: transparent; }