JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
  <div class="wrapper">
    <a class="logo" href="../wot.html">
      <h1>NAME</h1>
    </a>
    <div class="container">
      <li><a href="#" class="cool-link">Главная</a></li>
      <li><a href="#" class="cool-link">Связь</a></li>
      <li><a href="#" class="cool-link">Гарантии</a></li>
      <li><a href="#" class="cool-link">Поддержка</a></li>
    </div>
  </div>
  </header>
  </body>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
  text-decoration: none;
  font-family: "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
  background-color: #1C1B15;
  color: #fff;
}

a {
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}

.logo {
  position: absolute;
}

header {
	background: #232323;
}

.container {
  margin-left: 50%;
}

.wrapper {
  display: flex;
}

li {
	display: inline-block;
}

li a {
 display: inline-block;
	text-decoration: none;
	font-weight: lighter;
	font-size: 20px;
	padding: 0 20px;
}

.cool-link::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background: #fff;
	transition: width 0.3s;
}

.cool-link:hover::after {
	width: 100%;
	transition: width 0.3s;
}