JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Header -->
	<div class="main-header">
		<div class="top-panel">

			<div class="left-side">
				<h1><a href="#" class="icon-iconmonstr-infinity-1"><span>Creative</span> Box</a></h1>
			</div>

			<div class="right-side">
				<ul class="main-nav">
					<li><a href="">About</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">Calculator</a></li>
					<li><a href="">News</a></li>
					<li><a href="">Contact</a></li>
				</ul>
				<div class="phone">0947891495</div>
				<button class="main-btn">Get Started</button>
			</div>

		</div>

		<div class="presentation">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
							<h3 class="near-titles">About Company</h3>
							<h2>
								Guarantee the prompt<br> and reliable transportation<br> of your goods.
							</h2>
							<button>Container</button>
							<button class="second-btn">Box</button>
					</div>
				</div>
			</div>
		</div>

	</div>

CSS

/* Main CSS */

body, button {
	font-family: 'PT Sans', sans-serif;
	color: #455F87;
}

p {
	line-height: 28px;
	font-size: 1.6rem;
}

p.under-title {
	line-height: 32px;
	margin-top: 21px;
	margin-bottom: 10px;
}

h1, h2, h3, h4 {
	color: #212121;
	text-transform: uppercase;
}

h2 {
	font-size: 4rem;
	line-height: 46px;
	margin-top: 18px;
}

h3, p.under-title {
	font-size: 1.8rem;
}

a {
	text-decoration: none;
}

button {
	text-transform: uppercase;
	font-weight: 700;	
	font-size: 1.6rem;
	border: none;
	color: #fff;
	background-color: #FB7DA4;
	background-image: linear-gradient(to right, #FBA9A2, #FB7DA4);	
}

button:hover {
	opacity: 0.9;
}

/* Header */

.main-header {
	min-height: 100vh;
}

.main-header .top-panel {
	display: flex;
	justify-content: space-between;
	height: 90px;
	background-color: #fff;
	box-shadow: inset 0 -2px 0 0 #DCE9F5;
}

.main-header .left-side {
	padding-top: 35px;
}

.left-side h1 a {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	margin-left: 99px;
	color: #212121;
}

.left-side h1 a span {
	font-size: 1.8rem;
	font-weight: 300;
}

.main-header .right-side {
	display: flex;
}

ul.main-nav {
	display: flex;
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

ul.main-nav a, .right-side .phone {
	font-weight: 700;	
	font-size: 1.6rem;
	margin-right: 40px;
	line-height: 90px;
}

ul.main-nav a {
	text-transform: uppercase;
	color: #455F87;
}

ul.main-nav a:hover {
	color: #37A1F6;
	border-bottom: 2px solid #37A1F6;
	padding-bottom: 34px;
}

.right-side .phone {
	color: #212121;
	border-left: 2px solid #DCE9F5;
	padding-left: 40px;
}

.right-side .main-btn {
	padding-right: 40px;
	padding-left: 40px;	
} 

h3.near-titles {
	color: #FB7DA4;
	position: relative;
}

h3.near-titles:before {
	content: "";
	position: absolute;
	background-color: #FB7DA4;
	width: 40px;
	height: 2px;
	top: 8px;
	left: -60px;
}

.main-header .presentation {
	background-color: #E7F3FE;
	background-image:...