JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><input type="radio" name="menu" id="menu1" checked><label for="menu1">Главная</label>
    <li><input type="radio" name="menu" id="menu2"><label for="menu2">Каталог</label>
    <li><input type="radio" name="menu" id="menu3"><label for="menu3">Прайс</label>
    <li><input type="radio" name="menu" id="menu4"><label for="menu4">Контакты</label>
</ul>

CSS

body { background: #0a0; }
ul { border-bottom: 1em solid #fff; font: 20px/1 sans-serif; }
li { display: inline; }
input { position: absolute; visibility: hidden; }
label { display: inline-block; color: #fff; background: #0a0; text-transform: uppercase; padding: .5em 1em; cursor: pointer; }
label:hover, :checked+label, ul:hover label:hover { color: #0a0; background: #fff; outline: 0; }
ul:hover label { color: #fff; background: #0a0; }