JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
  <a 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>
  </header>
  </body>

CSS

*{
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100%;
  text-decoration: none;
}
a{
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}
body{
  	font-family: "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
    background-color: #1C1B15;
		color: #fff;
}
header{
	background: #232323;
}
/*Шапка*/
.container{
  margin-left: 50%;
	position: absolute;
}
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 .3s;
}
.cool-link:hover::after{
	width: 100%;
	transition: width .3s;
}
/*Конец шапки*/