JSFiddle - React, Tailwind, and code Playground

by Andreator

HTML

<!DOCTYPE html>
<html>
<head>
	<title>PUTATE OLUT</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
	<div class="top">
		<div class="content">
			<div class="space"></div>
			<div class="logo">SITENAME</div>
			<div class="headbg"></div>
		</div>
	</div>
	<div class="bottom">
		<div class="content">
			<div class="menu">
				<a href="#" class="link_menu">HOME</a>
				<a href="#" class="link_menu">ABOUT</a>
				<a href="#" class="link_menu">WORK</a>
				<a href="#" class="link_menu">CONTACT</a>
			</div>
			<div class="main">
				<div class="main_heading">
					<h2 class="main_heading_h2">SED EGESTAS ANTE ET VULPUTATE</h2>
					<h3 class="main_heading_h3">SEMPER EST VITAE LUCTUS METUS LIBERO EU AUGUE MORBI PURUS LIBERO</h3>
				</div>
				<div class="part1">
					<div class="part1_left">
						<div class="box1">
							<div class="img_box1">
								<img src="img/img_box1.png">
							</div>
						</div>
						<div class="box2">
							<p class="box2_text1">MORBI INTERDUM</p>
							<p class="box2_text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iusto blanditiis, rerum deserunt amet odit autem ab eveniet, necessitatibus ipsam quos. Aperiam natus deleniti blanditiis quis ab, optio!</p>
							<a href="#" class="box2_link">READMORE <img src="img/str.png"></a>
						</div>
					</div>
					<div class="part1_center">
						<div class="box1">
							<div class="img_box1">
								<img src="img/img_box1.png">
							</div>
						</div>
						<div class="box2">
							<p class="box2_text1">MORBI INTERDUM</p>
							<p class="box2_text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iusto blanditiis, rerum deserunt amet odit autem ab eveniet, necessitatibus ipsam quos. Aperiam natus deleniti blanditiis quis ab,...

CSS

body{
	margin:0;
	background: #cfced3;
	font-family: 'Fjalla One', sans-serif;
}
.top{
	height: 620px;
	background: #2b2935;
}
.bottom{
	height: 1580px;
}
.content{
	width: 1230px;
	min-height: 50px;
	margin: 0 auto;
}
.space{
	height: 77px;
}
.logo{
	height: 85px;
	width: 240px;
	margin:0 auto;
	background: #f76e5d;
	color: white;
	text-align: center;
	line-height: 85px;
	font-size: 40px;
}
.headbg{
	height: 450px;
	background: url(../img/bg.png);
}
.menu{
	height: 91px;
	background: #f76e5d;
	line-height: 91px;
	text-align: center;
}
.link_menu{
	text-decoration: none;
	color: white;
	margin: 0px 32px;
}
.main{
	background: #e0dfe5;
}
.main_heading{
	text-align: center;
	padding: 50px 0px;
}
h2, h3{
	margin: 0px;
	letter-spacing: 1px;
}
.main_heading_h2{
	font-weight: 500;
	color: #3e3c4a;
}
.main_heading_h3{
	color: #f76e5d;
	font-weight: 600;
}
.part1{
	height: 208px;
	border-top: 1px solid #c1c0c6;
	border-bottom: 1px solid #c1c0c6;
	margin: 0px 30px;
	padding-top:50px; 
}
.part1_left{
	width: 348px;
	height: 159px;
	float: left;
}
.part1_center{
	width: 348px;
	height: 159px;
	float: left;
	margin:0px 63px
}
.part1_right{
	width: 348px;
	height: 159px;
	float: left;
}
.box1{
	width: 50px;
	height: 159px;
	float: left;
}
.img_box1{
	width: 50px;
	height: 50px;
	background: #f76e5d;
}
.box2{
	width: 276px;
	height: 159px;
	float: left;
	padding-left: 22px;
}
.box2_text1{
	color:#3e3c4a;
	margin: 0px;
	font-size: 20px;
}
.box2_text2{
	color:#6f6e74;
	font-size:10px;
	margin: 15px 0px 20px 0px;
	font-family: 'Lato', sans-serif;
}
.box2_link{
	text-decoration: none;
	color: #f76e5d;
}
.part2{
	text-align: center;
	line-height: 380px;
	height: 380px;
	margin: 50px 30px 0px 30px;
	background: #cfced3;
}
.part3{
	height: 350px;
	margin: 0px 30px;
	padding-top:51px; 
}
.part3_left{
	height: 350px;
	width: 346px;
	float: left;
}
.part3_center{
	height: 350px;
	width: 346px;
	margin: 0px 54px;
	float: left;
}
.part3_right{
	height: 350px;
	width: 370px;
	float:...