JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="mainmaket.css">
        <title>Макет</title>
    </head>
<body>
    <header class="main-header">
        <div class="container clearfix"> 
            <nav class="main-navigation"> 
        <ul>
            <li><a href="#company">О Швеции</a></li>
            <li><a href="#state">Я иммигрант</a></li>
            <li><a href="#people">Коммуны</a></li>
            <li><a href="#work">Работа</a></li>
            <li><a href="contacts">Контакты</a></li>
        </ul>
            </nav> 
        <div class="user-block">
            <a href="#" class="login">Вход</a>
        </div>
        </div>
    </header>
    
    <div class="face">
    <div class="container">
    <div class="info">
        <h1>Добро пожаловать в Швецию</h1>
    <p>На этом сайте вы можете найти ответы на свои вопросы.</p>
        <a href="#">Узнать еще</a>
        <a href="#">Наш канал на youtube.com</a>
    </div>
    </div>
    </div>
     </body>
</html>

CSS

body {
  font-size: 14px;
  line-height: 24px;
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  min-width: 960px;
  background: #ecf0f1 url("img/body-bg.jpg") no-repeat center top;
}

.container {
  width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.main-header {
  margin-bottom: 60px;
  background: dimgray;
}

.main-navigation {
  float: left;
  width: 780px;
}

.user-block {
  float: right;
  max-width: 140px;
}

.main-navigation ul {
  margin: 0;
  padding: 0;
  font-size: 0;
  list-style: none;
}

.main-navigation li {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  vertical-align: top;
}

.main-navigation a {
  display: block;
  padding: 25px 20px;
  text-decoration: none;
  color: burlywood;
}

.main-navigation a:hover {
  background: rosybrown;
}


.main-navigation .active a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 5px;
  background: burlywood;
}

.login {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 25px 20px;
  padding-left: 50px;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  color: burlywood;
}

.login:hover {
  background: rosybrown;
}

.login:before {
  content: "";
  position: absolute;
  top: 28px;
  left: 20px;
  width: 18px;
  height: 18px;
}

.login:hover:before {
  opacity: .3;
}

.info {
    text-align: center;
    color: black;
}