JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu33">
        <ul>
                <li class="active snacks"><a href="#">Холодные закуски</a></li>
                <li class="salads"><a href="#">Салаты</a></li>
                <li class="hot"><a href="#">Горячие закуски</a></li>
        </ul>
</div>

CSS

.menu33  ul li {list-style-type: none; float: left; text-align: center;}
.snacks, .hot {width: 40%;}
.salads {width: 19%;}
.menu33 ul li a {color: #cc3333; margin: 6px 0; text-decoration: none; border-bottom: 1px dashed #cc3333;}
.menu33  ul li:hover a{color: #996666; font-weight: bold; border-bottom: 1px dashed #996666;}