JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<!--Начало блока features-->
		<header>
		<div class="container">
			<div id="logo">
				<img src="images/logo.png" alt="">
			</div>

			<div id="logIn">
				<a href="#" class="signup">
					sign up
				</a>

				<a href="#" class="login">
					log in
				</a>

			</div>
				<div class="clear"></div>

			<h3 class="favorite">
				Find your Favorite
			</h3>

			<h1 class="recipes">
				RECIPES
			</h1>

			<button class="btn">
				get started
			</button>

			<p class="descr">
				or send us your own recipes and <a href="#" class="link_descr">get rewarded</a>!
			</p>
			</div>
		</header>
	<!--Конец блока header-->

		<!--Начало блока features-->
			<section id="features">
			<div class="container">
					<div class="feature">
						<div class="feature_pic">
							<img src="images/1.png" alt="">
						</div>

						<h3 class="title">
							get inspired
							<div class="line"></div>
						</h3>

						<p class="text">
							Lorem ipsum dolor sit amet, consectetur adipisc 
							Pellentesque vel enim a elit viverra elementuma.
							Aliquam erat volutpat. 
						</p>
					</div>

					<div class="feature">
						<div class="feature_pic">
							<img src="images/2.png" alt="">
						</div>

						<h3 class="title">
							get inspired
							<div class="line"></div>
						</h3>

						<p class="text">
							Lorem ipsum dolor sit amet, consectetur adipisc 
							Pellentesque vel enim a elit viverra elementuma.
							Aliquam erat volutpat. 
						</p>
					</div>

					<div class="feature">
						<div class="feature_pic">
							<img src="images/3.png" alt="">
						</div>

						<h3 class="title">
							get social
							<div class="line"></div>
						</h3>

						<p class="text">
							Lorem ipsum dolor sit amet, consectetur adipisc 
							Pellentesque vel enim a elit viverra elementuma.
							Aliquam erat volutpat. 
						</p>
					</div>
				</div>
				<div class="clear"></div>
			</section>
		<!--Конец блока features-->

		<!--Начало блока...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}s
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clear {
	clear:both;
}

.container {
	width:1180px;
	margin:0 auto;
}

/*Шапка*/

header {
	height:800px;
	background:#ccc url(images/header_bg.jpg) no-repeat top left;
	background-size:cover;
}

#logo {
	width:147px;
	height:136px;
	float:left;
}

#logIn {
	float:right;
	margin-top:50px;
}

.login {
	margin-right:30px;
	font:bold 14px 'lato', Arial, sans-serif;
	color:#fff;
	text-transform:uppercase;
	float:right;
	text-decoration:none;
}

.login:hover {
	border-bottom:2px solid #fff;
}

.signup {
	font:bold 14px 'lato', Arial, sans-serif;
	color:#fff;
	text-transform:uppercase;
	float:right;
	text-decoration:none;
}

.signup:hover {
	border-bottom:2px solid #fff;
}

.favorite {
	font:bold italic 36px 'Times New Roman', Arial, sans-serif;
	color:#fff;
	text-align:center;
}

.recipes {
	margin-top:-10px;
	margin-bottom:25px;
	font:bold 100px 'lato', Arial, sans-serif;
	color:#fff;
	text-align:center;
}

.btn {
	background:none;
	margin-left:447px;
	margin-bottom:41px;
	font:bold 18px...