JSFiddle - React, Tailwind, and code Playground

HTML

<header class="document-header">
  <nav class="header-nav">
    <div class="site-band">
      <img class="nav-band" src="img/logo.png">
      <button class="toggle-menu btn"></button>
    </div>
    <div class="menu-container">
      <ul class="header-menu header-menu-center">
        <li>
          <a class="active-link" href="/">Главная</a>
        </li>
        <li>
          <a class="" href="/company">Компания</a>
        </li>
        <li>
          <a class="" href="/shop">Магазин</a>
        </li>
        <li>
          <a class="" href="/necropolis">Некрополь</a>
        </li>
      </ul>
      <ul class="header-menu header-menu-right">
        <li>
          <a href="/login">Вход</a>
        </li>
      </ul>
      <div class="header-menu-second" data-menu-item="company">
        <ul>
          <li></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    outline: none;
}

html {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 300;
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    position: relative;
    background-color: #eaeaea;
    flex-flow: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.header-menu-right {
width: auto !important;
margin: 0px !important;
}

nav a {
  display: block;
}

header nav a {
  padding: 7px;
}

header.document-header,
.document-footer {
  background-color: #262626;
  color: #fff;
  width: 100%;
  overflow: hidden;
}

.header-nav ul.header-menu {
  display: flex;
  align-items: center;
}

.header-menu-center li {
  margin: 0px 70px;
}

img.nav-band {
  width: 45px;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 20px;
}

ul {
    list-style: none;
}

nav a {
    display: block;
}

header nav a {
    padding: 7px;
}

header.document-header {
    background-color: #262626;
    color: #fff;
    width: 100%;
    overflow: hidden;
}
.header-nav ul.header-menu {
    display: flex;
    align-items: center;
}

.header-menu-center li {
    margin: 0px 70px;
}

img.nav-band {
    width: 45px;
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 20px;
}

.header-menu-right {
    width: auto !important;
    margin: 0px !important;
}

.menu-container {
    display: flex;
}

.site-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.menu-container {
    width: 100%;
    display: none;
}

.menu-container.menu-container__active {
    display: flex;
    transform: translate3d(0, 0, 0);
}

.toggle-menu:before {
    content: "\2261";
    font: 2em "arial";
}

@media (min-width: 992px) {
   ...