JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">

        <li><a href="#">fond</a></li>

        <li><a href="#">blago</a></li>

        <li><a href="#">knigi</a></li>

</ul>

CSS

ul{
     margin-top:20px;
     list-style:none;
}

li {
    float:left;
    width:80px;
    height:30px;
    line-height:30px;
    background:#6495ED;
    text-align:center;
    margin-left:1px;
    border-radius:10px 10px 0 0;
}

ul li a{
    text-decoration:none;
    color:black;
    font-size:19px;
}

ul li:hover {
    margin-top:-20px;
    height:50px;
    line-height:50px;
    background:#000080;
    color:red;
    font-weight:bold;
}

ul li:hover a{
    color:red;
    font-weight:bold;
}