JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="frames">
    <li>
        <a href="#">
            <p>Text1</p>
        </a>
    </li>
    <li>
        <a href="#">
            <p>Text1</p>
        </a>
    </li>
    <li>
        <a href="#">
            <p>Text1</p>
        </a>
    </li>
    <li>
        <a href="#">
            <p>Text1</p>
        </a>
    </li>
</ul>

CSS

ul.frames {
    width: 100%;
    padding: 0px;
    background-color: grey;
}
ul.frames li {
    background-color: red;
}
ul.frames li:hover {
    background-color: white;
}