JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body class="news">
  <header>
    <div class="bengurin_kazaga">
      <ul>
        <li class="home"><a href="#">Главная</a></li>
        <li class="tutorials"><a class="zornet_ru" href="#">ZorNet.Ru</a></li>
        <li class="about"><a href="#">Скрипты</a></li>
        <li class="news"><a href="#">Шаблоны</a></li>
        <li class="contact"><a href="#">Коды</a></li>
      </ul>
    </div>
  </header>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
 
.bengurin_kazaga ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.bengurin_kazaga li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 39.7px;
  height: 39.7px;
  border-bottom: 1px solid #888;
}
 
.bengurin_kazaga a {
  text-decoration: none;
  color: #f7f5f5;
  display: block;
  transition: .3s background-color;
}
 
.bengurin_kazaga a:hover {
  background-color: #033e3e;
}
 
.bengurin_kazaga a.zornet_ru {
  background-color: #f7f7ff;
  color: #2d2c2c;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .bengurin_kazaga li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  .bengurin_kazaga li {
    display: inline-block;
    margin-right: -4px;
  }
}