JSFiddle - React, Tailwind, and code Playground

by Andreator

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>PhoneFolio</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body>
	<div class="box_top">
	<div class="top_bg_line"></div>
		<div class="content">
			<div class="box_top_left">
				<img src="img/logoandtext.png" class="img_left1">
				<div class="fixform" style = "display: flex; align-items: center;">
					<form>
						<!-- Использовал howtocenterincss-->
							<input type="text" name="" class="inptext" placeholder="Enter your email Address" maxlength="15">
							<input type="submit" class="inpsub" value="Subscribe">
					</form>
				</div>
			</div>
			<div class="box_top_center">
				<img src="img/Phone.png" class="imgPhone">
			</div>
			<div class="box_top_right">
				<img src="img/pointer.png" class="imgpointer">
				<div class="round">
					<img src="img/str.png" style="margin-top: 37px;">
					<p style="line-height: 23px;">See the<br><span style="font-weight: bolder;">South Video</span></p>
				</div>
				<!--Кнопки в правой колонке-->
				<div class="box_media">
					<div class="buttonOne">
						<img src="img/minPhone.png" style="vertical-align: middle;">
					</div>
					<div class="buttonTwo"> Get this App </div>
					<div class="like">  
						<img src="img/like.png" style="vertical-align: middle;">
					</div>
					<div class="twitter">
						<img src="img/twitter.png" style="vertical-align: middle;">
					</div>	
				</div>
			</div>
		</div>
	</div>
		<div class="cloudsIn"></div>
		<div class="cloudsOut"></div>
	<div class="box_center">
		<div class="content"></div>
	</div>
	<div class="box_bottom">
		<div class="content"></div>
	</div>
	<div class="bottom_bg_line"></div>


	
</body>
</html>

CSS

body{
	margin: 0;

}
.content{
	min-height: 50px;
	width: 1000px;
	margin:0 auto;
}
.box_top{
	height: 638px;
	width: 100%;
	background: url("img/topclouds.png") center repeat-x,
		 		#56CAD6 url("img/bg2.png") center repeat-x ;
}
.top_bg_line{
	height: 4px;
	background: url("img/bg1.png") center repeat-x;
}
.cloudsIn{
	height: 160px;
	background: url("img/cloudsIn.png") center repeat-x;
	margin:-157px 0px 0px 0px;
}
.cloudsOut{
	height: 140px;
	background: url("img/cloudsOut.png") center repeat-x;
	margin:-108px 0px 0px 0px;
	position: relative;
	z-index: 10;
}

/* Три блока внутри контента*/
.box_top_left{
	min-height: 20px;
	width: 33.33%;
	float: left;
	padding-top: 80px;
}
.box_top_center{
	min-height: 20px;
	width: 28%;
	float: left;
}
.box_top_right{
	min-height: 20px;
	width: 33.33%;
	float: left;
}
/* end */
.img_left1{
	margin-top: 35px;
}
.fixform{
	margin: 28px 0px 0px 7px;
}
.inptext{
	height: 46px;
	width: 155px;
	border: 1px solid #48aab4;
	border-radius: 8px;
	box-shadow: inset 0px 29px 42px -38px rgba(0,0,0,0.75);
	font-size: 12px;
	padding-left: 16px;
	display: block;
	float: left;
}
.inptext:focus{
	outline: none;
}
.inpsub{
	height: 50px;
	width: 118px;
	border: 1px solid #48aab4;
	border-radius: 8px;
	font-size: 12px;
	font-size: 16px;
	font-weight: 600;
	margin-left: 5px;
	box-shadow: inset 0px 17px 0px -16px rgba(242,242,242,1);
	background: linear-gradient(to top, #fad083, #ffe0a6);
	display: block;
	float: left;
	color: #484848;
}
.inpsub:hover{
	box-shadow: none;
	cursor: pointer;
	color:#FEDC9B;
	background: linear-gradient(to top, #4C5868, #788494);
}
.imgPhone{
	margin-top: 58px;
	position: relative;
	z-index: 8;
}
.imgpointer{
	margin: 279px 0px 0px -121px;
	position: relative;
	z-index: 9;
}
.round{
	margin: -207px 0px 0px 30px;
	height:180px; 
	width:180px;
	border-radius: 50%;
	opacity: 0.9;
	background:#d5f2f5;
	text-align: center;
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
}
.round:hover{
	background:#FDDB9C;
	cursor:...