JSFiddle - React, Tailwind, and code Playground

by Sergey Sholokhov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<div class="navbar ">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Главная</a>
        </li>
        <li>
          <a href="#">Демо-доступ</a>
        </li>
        <li>
          <a href="catalog.html">Каталог</a>
        </li>
        <li>
          <a href="contact.html">Контакты</a>
        </li>
      </ul>
    </div>
  </div>
</html>

CSS

.navbar-collapse {
  background: linear-gradient(to bottom, #a5a5a5, #000);
  border-radius: 10px
}
.navbar-nav>li>a {
  color: white;
}

.navbar-nav>li>a:hover {
  color: green;
}
.navbar-nav>li {
      border-right: 1px solid gray;
}