JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
	<title>Blog</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
	<header>
	
	</header>
	<main >	
		<div class='topback'>
			<img class='logo' src="D:\HTML\MyBlog\Foto\logo_795.png">
			<div class="text1">Hi there! We are the new kids on the block<br> and we build awesome websites and mobile apps.
			</div>
			<button onclick="window.location.href='https://news.google.com/topstories?hl=ru&gl=UA&ceid=UA:ru';" 
				class="button1">
	 			<p class="inbutt" >WORK WITH US!</p>
			</button>
		</div>
		<div class="back2">
			<div class='text2'>SERVICES WE PROVIDE</div>
			<div class='line'></div>
			<div class='text3'>We are working with both individuals and businesses from all over the globe<br> 
			to create awesome websites and applications.</div>
			<div class='underfoto1'>
				Branding
			</div>
			<div class="underfoto2">
				Lorem ipsum dolor sit amet,<br>
				consectetuer adipiscing elit,<br> 
					sed diam nonummy nibh.
			</div>
			<div class='underfoto3'>
				Design
			</div>
			<div class="underfoto4">
				Sed ut perspiciatis unde<br> omnis iste natus error sit<br>
				voluptatem
			</div>
			<div class="underfoto5">
				Development
			</div>
			<div class='underfoto6'>
				At vero eos et accusamus et<br> iusto odio dignissimos qui<br>
				blanditiis praesentium.
			</div>
			<div class="underfoto7">
				ROCKET SCIENCE
			</div>
			<div class="underfoto8">
				Et harum quidem rerum est<br> et expedita distinctio. Nam<br> libero tempore.
			</div>
			<div class="piecepicture1">
				<svg xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink"
				width="64px" height="66px"  viewBox="0 0 67 69">
				<path fill-rule="evenodd"  fill="#d84848"
				d="M65.99991,1.9992065 C65.99991,1.9992065 1.9998169,1.9992065 1.9998169,1.9992065 C1.9998169,1.9992065 1.9998169,67.99963 1.9998169,67.99963 C1.9998169,67.99963 65.99991,67.99963...

CSS

.topback{
	width: 1440px;
	height: 596px;
	background-color: #87509c;
	margin-left: 12%;
}
.back2{
	width: 1440px;
	height: 747px;
	background-color: #17c2a4;
	margin-left: 12%;
}
.back3{
	width: 1440px;
	height: 914px;
	background-color: #e7f1f8;
	margin-left: 12%;
}
.back4{
	width: 1440px;
	height: 655px;
	background-color: #ffffff;
	margin-left: 12%;
}
.back5{
	width: 1440px;
	height: 1423px;
	background-color: #ffdd99;
	margin-left: 12%;
}
.back6{
	width: 1440px;
	height: 895px;
	background-color: #d74680;
	margin-left: 12%;
}
.back7{
	width: 1440px;
	height: 819px;
	background-color: #3c5499;
	margin-left: 12%;
}
.backfooter{
	width: 1440px;
	height: 20px;
	background-color: #344b8e;
	margin-left: 12%;
}
.logo{
	width: 118px;
	height: 37px;
	margin-left: 212px;
	margin-top: 60px;
}
.text1{
	font-family: 'TitilliumWeb-ExtraLight.ttf';
	font-size: 42.2px;
	line-height: 48px;
	font-weight: 700;
	color: #f7f3ea;
    margin-left: 267px;
    margin-right: 267px;
    margin-top: 150px;
	text-align: center;
}
.button1{
	margin-left: 500px;
	margin-bottom: 50px;
	width: 293px;
	height: 70px;
	background-color: #eb7d4b;
}
.inbutt{
	font-family: 'TitilliumWeb-LightItalic.ttf';
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #ffffff;
}
.text2{
	font-family: 'TitilliumWeb';
	font-size: 40px;
	line-height: 29px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #ffffff;
	display: inline-block;
	margin-top: 120px;
	margin-left: 482px;
}
.line{
	width: 87px;
	height: 4px;
	opacity: 0.14;
	background-color: #000000;
	margin-left: 676px;
	margin-top: 25px;
}
.text3{
	font-family: TitilliumWeb;
	font-size: 18px;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-align: center;
	margin-top: 23px;
}
.underfoto1{
	font-family: TitilliumWeb;
	font-size: 24px;
	line-height: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ffffff;
	margin-top: 271px;
	margin-left:...