JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div id="menu">
    <ul class="menu">
        <li><a href="#">Вам о нас</a></li>
        <li class="podcherk"><a href="#">Услуги и прайс</a></li>
        <li><a href="#">Наглядно</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
  
  </div>

CSS

.menu{
    position: relative;
    float: right;
    top: 7px;
}
.menu li {
    float: left;
    padding-right: 5px;
    font-size: 14px;
}
.menu a {
    color: #2a2a2a;
    text-decoration: none;
}
.menu li:before {
    content: '|';
    color: #cde5e2;
    padding-right: 5px;
}
.menu li:first-child:before {
    content: none;
}
.menu li.podcherk a {
    color: #7ac5f2;
    text-decoration: underline;
}
.menu a:hover {
    color:#7ac5f2;
}
.menu li.podcherk a:hover {
    color:#FC0;
}