JSFiddle - React, Tailwind, and code Playground

by AntonLapshin

HTML

<div id="header">
<div class="navigation">
<ul class="navigation fc">
  <li class="selected">
    <a href="/о-компании.aspx">О компании</a>
  </li>
  <li class="">
    <a href="/услуги.aspx">Услуги</a>
  </li>
  <li class="">
    <a href="/цены.aspx">Цены</a>
  </li>
  <li class="">
    <a href="/отзывы.aspx">Отзывы</a>
  </li>
  <li class=" last">
    <a href="/контакты.aspx">Контакты</a>
  </li>
</ul>
</div>
</div>

<div id="footer">
<div class="navigation">
<ul class="navigation fc">
  <li class="selected">
    <a href="/о-компании.aspx">О компании</a>
  </li>
  <li class="">
    <a href="/услуги.aspx">Услуги</a>
  </li>
  <li class="">
    <a href="/цены.aspx">Цены</a>
  </li>
  <li class="">
    <a href="/отзывы.aspx">Отзывы</a>
  </li>
  <li class=" last">
    <a href="/контакты.aspx">Контакты</a>
  </li>
</ul>
</div>
</div>

CSS

div.navigation
{
    margin-top: 15px;
    width: 796px;
    display: inline-block;
}

ul.navigation { margin: 0 0 0 0 !important; }

#header ul.navigation li
{
    background: -webkit-linear-gradient(top, #ededed, #d2d2d2);
}

ul.navigation li
{
    display: inline-block;
    margin: 0 0 0 0 !important;
    height: 60px;
    width: 19.5%;
    line-height: 60px;
    text-align: center;
    position: relative;
}

#header ul.navigation li:hover { background: -webkit-linear-gradient(top, #dddddd, #c2c2c2); }

#footer ul.navigation li:before { top: 0; } 
ul.navigation li:before
{
    content: '';
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background-color: #009dff;
}
#header ul.navigation li a { color: #0081cb; }

ul.navigation li a
{
    font-family: tahoma;
    color: black;
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
}
#header .selected { background: -webkit-linear-gradient(top, #3ad8fc, #017ebe) !important; }
#header .selected a { color: white !important; }
.selected a { color: #0a8abf !important; }
.selected:before { background-color: #3ad5fc !important; }

#header ul.navigation li:first-child
{
    border-top-left-radius: 15px;
}

#header ul.navigation li:last-child
{
    border-top-right-radius: 15px;
}