JSFiddle - React, Tailwind, and code Playground

by efendi

HTML

<div class="menu-primary-navigation-container">
  <ul id="menu-primary-navigation" class="nav navbar-nav">
    <li><a href="/"><i class="fa fa-home"></i> Главная</a></li>
    <li><a href="/vypadenie/">Выпадение волос</a></li>
    <li><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>
</div>

CSS

*::after, *::before {
box-sizing: border-box;
}

.navbar-nav li {
	float: left;
  list-style: none;
}

.menu-primary-navigation-container {
  width: 1150px;
  height: 30px;
  background: #146c74;
}

.menu-primary-navigation-container li a {
    display: block;
    font-family: "Roboto",Tahoma,Geneva,sans-serif;
    font-size: 0.9em;
    padding: 0 18px;
    text-decoration: none;
    color: #fff;
    height: 30px;
    line-height: 30px;
}