JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="menu">
    <ul>
        <li><a href="#">Главная</a></li><li><a href="#">Пункт меню</a></li><li><a href="#">Контакты</a></li>
    </ul>
</div>

CSS

.menu {
    background: linear-gradient(to bottom, #C80001, #780000, #820000, #A30001);
    width:900px;
    height:51px;
    border:2px solid #000;
    float:left;
}
.menu ul {
    margin:0;
    padding:0;
}
.menu li {
    display:inline-block;
    border-left:2px solid #000;
}
.menu li:first-child {
    border-left:none;
}
.menu li a {
    display:block;
    font:italic bold 19px/50px Arial;
    text-decoration:none;
    color:#fff;
    padding:0 25px;
}
.menu li a:hover {
    background: linear-gradient(to bottom, #4A4A4A, #131313, #171717, #2F2F2F);
    color:#fff;
    height:51px;
}