JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu1">
    <li><a>Item #1</a></li>
    <li><a>Item #2</a></li>
    <li><a>Item #3</a></li>
</ul>



<ul id="menu2">
    <li><a>Item #1</a></li>
    <li><a>Item #2</a></li>
    <li><a>Item #3</a></li>
</ul>

CSS

#menu1, #menu2 {
    border: 1px solid #000;
    list-style-type: none;
    padding: 5px;
    
}

#menu1 {
    background-color: #FFFF00;
    display: inline;
    float: left;
    width: 40%;
}

#menu2 {
    background-color: #FF0000;
    display: inline;
    float: right;
    width: 45%;
}

#menu1 li, #menu2 li {
    display: inline;
    padding: 5px 12px;
}

#menu1 li:hover, #menu2 li:hover {
    padding: 5px 12px;
}

#menu1 li:hover {
    background-color: #FFFF4D;
}

#menu2 li:hover {
    background-color: #FF4D4D;
}