JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

	<header class="header">
        <img src="http://placehold.it/1365x150"/>
	</header>

	<main class="content">
		<div class="wrap row">
			<h1>Заголовок первого уровня</h1>
			<h3>Заголовок третьего уровня</h3>
			<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. <a href="" title="">Suspendisse nibh pede</a>, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
		</div>
	</main>
    
    <footer class="footer">
	<img src="http://placehold.it/1365x100"/>
</footer>

</div>

CSS

body {
	min-width: 940px;
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-family: verdana, sans-serif;
	background: #fff;
}

.wrapper {
	min-width: 940px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow: hidden;
}
.header {
	height: 150px;
    margin: 0 auto;
    width: 1365px;
	background: #FFE680;
}

.content {
	margin: 0 auto;
    width: 940px;
}

.footer {
	height: 100px;
    margin: 0 auto;
    width: 1365px;
	background: #BFF08E;
	position: relative;
}