JSFiddle - React, Tailwind, and code Playground

HTML

<body>
       <header>
    </header>
           <nav>
        <ul>
            <li><a href="#"> О НАС </a></li>
            <li><a href="#"> КАТАЛОГ </a></li>
            <li><a href="#"> КОНТАКТЫ </a></li>
        </ul>
    </nav>
            <div class="info">
        <h1>О КОМПАНИИ</h1>
        <p> апвпваыпывап</p>
    </div>
   <div class="boarder">
   </div>
</body>
</html>

CSS

body{
background-color: rgb(26,26,26);
}

header{
text-align: left;
height: 300px;
}

ul{
list-style-type: none;
text-align: center;
margin: -220px 0px 0px 170px;
padding: 0px;
}

li{
display: inline;
margin-right: 100px;
}

a{
color: rgb(249,249,249);
text-decoration: none;
font-size: 30px;

}

a:hover{
color: rgb(151, 3, 94);
}

.boarder{
margin: 100px 0px 0px 0px;
height: 700px;
position: relative;
}
.boarder:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://placehold.co/600x400);
background-position: center;
opacity: 0.1;
}
.info{
color:white;
position: relative
}

h1{
color: white;
text-align: center;

}
p{
color: white;
text-align: center;
font-size: 35px;
}

.info{
margin-bottom: -300px;
color:white;
}