JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title>Главная</title>
</head>
<body>
    <div class="page">

        <header class="header">
            <div class="header-bg">
                <img class="header-bg-clouds" src="img/header-clouds.png">
            </div>

            <nav class="nav">
                 <p>12333</p>
            </nav>
        </header>
    </div>

</body>
</html>

CSS

/*fonts*/

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Semibold.eot');
    src: local('SF Pro Display Semibold'), local('SFProDisplay-Semibold'),
        url('../fonts/SFProDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Semibold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Semibold.woff') format('woff'),
        url('../fonts/SFProDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Regular.eot');
    src: local('SF Pro Display Regular'), local('SFProDisplay-Regular'),
        url('../fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Regular.woff') format('woff'),
        url('../fonts/SFProDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------------------------*/

body{
    font-family: "SF Pro Display";
    font-weight: 400;
    font-size: 18px;

    max-width: 1920px;
    height: 4000px;
    margin: 0 auto;
}

page{
    width: 1170px;

}

/*-------------------HEADER-------------------*/

.header-bg-clouds{
    max-width: 1920px;
    width: 2075px;
    height: 418px;

    position: absolute;
    left: 0px;
    top: 481px;
}

.header-bg{
    height: 782px;

    background: url("../img/header-bg.jpg") no-repeat center;
    background-position: -33px -42px;
    background-size: 1986px 824px;

    filter: blur(20px);
    z-index: 0;
}

/*nav*/

.nav {
    width: 1920px;
    height: 90px;
    max-width: 1920px;

    border-bottom: 1px solid #DADADA;

    top: 0;
}