JSFiddle - React, Tailwind, and code Playground

by webgleb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--fonts-->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap" rel="stylesheet">
	<!-- Icon иконки -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	<link rel="stylesheet" href="css/style.css">
	<title>HM</title>
</head>
<body>
	<section class="about">
		<div class="container">
			<div class="about__content"> 
				<div class="man">
					<img src="https://i.imgur.com/pFoGJCd.png">
				</div>
				<div class="text">
					<h3>Hi, i’m Hayk Meliqyan, Experience Crafter from Armenia.</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis laborum modi necessitatibus recusandae,  necessitatibus recusandae,ibus recusandae,  necessitatibus recusandae, numquam, sit aspeessitatibus recusandae, numquam, sit aspernatur eligendi! Corrupti enim quae laudantium quas, dignissimos rerum?</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est corporis laborum modi necessitatibessitatibessitatibessitatibessitatibessitatibus recusandae, numquam, sit aspernatur eligendi! Corrupti enim quae laudantium quas, dignissimos rerum?</p>
					<div class="button">
						<a href="#" class="btn">Hire Me!</a>
					</div>
					
				</div>
			</div>
		</div>
	</section>
</body>
</html>

CSS

*{
	box-sizing: border-box;
}

body{
	font-family: 'Montserrat', sans-serif;
	margin: 0;
}
.container{
	max-width: 80%;
	margin: 0 auto;
}

.about{
	padding-top: 250px;
}
.about__content{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.about__content .man{
	flex: 5;
}
.about__content .text{
	flex: 6;
	
}

.about .man img{
	height: 650px;
  display: block;
}

.about .text h3{
	font-size: 18px;
	font-weight: 900;
}

.about .text p{
	margin-bottom: 35px;
	color: #646464;
	line-height: 1.7;
}
.about .text .button{
	margin-top: 55px;
}
.about .text .btn{
	text-decoration: none;
	color: white;
	background-color: rgb(255, 43, 74);
	padding: 10px 50px;
}
.about .text .btn:hover{
	background: #dd243f;
}