JSFiddle - React, Tailwind, and code Playground

by Bruno Augusto

HTML

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

<br />

<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;
    width: 250px;
}

#menu1 {
    background-color: #FFFF00;
}

#menu2 {
    background-color: #FF0000;
}

#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;
}