JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="menu">
        <ul>
            <li><a href="#">item0</a></li>
            <li><a href="#">item1</a></li>
        </ul>
    </div>
</body>

CSS

li {
    background: grey;
}

div {
    width: 100%;
}
.menu a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.menu a:hover {
    color: black;
    color: red;
    text-decoration: underline;
    background: white;
}