JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Главная Sedona</title>

	<link rel="stylesheet" href="css/main.scss">
</head>
<body>

	<header class="main-head">

		<div class="container">
			<nav>
				<ul class="main-nav">
					<li><a href="#">ИНФОРМАЦИЯ</a></li>
					<li><a href="#">ФОТО И ВИДЕО</a></li>
					<li><a href="#"><img src="img/logo.png" class="logo" alt="logo"></a></li>
					<li><a href="#">КАРТА ШТАТА</a></li>
					<li><a href="#">ГОСТИНИЦЫ</a></li>
				</ul>
			</nav>

			<section class="main-bg">

				<div class="top-bg">
					<img src="img/main-bg.jpg" alt="">
					<div class="top-bg-descr">
						<div class="top-bg-wrapper">
							<div class="top-bg-descr-big">CЕДОНА — небольшой городок в АРИЗОНЕ,<br> зАСЛУЖИвающий большего!</div>
							<div class="top-bg-descr-small">Рассмотрим 5 причин, по которым Седона круче чем гранд каньон!</div>
						</div>
					</div>
				</div>



			</section>

		</div>

	</header>

</body>
</html>

CSS

/* ==========================================================================
   Normalize.scss settings
   ========================================================================== */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *  `em` units.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
  ...