JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<ul class="menu">
    <li class="active"> <a href="#">Главная</a>
    </li>
    <li> <a href="#">Болезни</a>
    </li>
    <li> <a href="#">Лекарства</a>
    </li>
    <li> <a href="#">Медицинские учереждения</a>
    </li>
    <li> <a href="#">Конкурсы</a>
    </li>
</ul>

CSS

html, body {
    height: 100%;
}
body {
    padding: 30px o;
    display: flex;
}
.menu {
    text-transform: uppercase;
    margin: auto;
}
/*  */
/*  */
.menu li {
    display: inline-block;
    background-color: #84C557;
    position: relative;
}
.menu li:before, .menu li:after {
    content:"";
    position: absolute;
    left: 0;
    right: 0;
    background-color: inherit;
}
.menu li:before {
    bottom: 100%;
}
.menu li:after {
    top: 100%;
}
.menu li:hover:before, .menu li:hover:after {
    height: 5px;
}
.menu a {
    padding: 7px 32px;
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: bolder;
}