JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://kenwheeler.github.io/mcfly/McFly.js"></script>
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Dotinstall Pane</title>
	<link rel="stylesheet" href="css/styles.css">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
	<header class="orange-bg">
		<div class="container">
			<h1>Dotinstall Pane</h1>
			<p>ドットインストールを見ながら<br>
			   コーディングができるAtomパッケージ</p>
			   <a href="#" target="_blank" class="btn">詳細をみる<i class="fas fa-external-link-alt"></i></a>
			   <img src="img/top.png" width="580px" height="270px">
		</div>
	</header>
	<section class="features">
		<div class="container">
			<h1 data-subtitle="- features -" class="section-title">Dotinstall Paneの特徴</h1>
				<section class="feature">
					<img src="img/feature1.png" widht="420" height="270" alt="特徴1">
					<div class="desc">
						<h2>すごい特徴があるよ！</h2>
						<p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p>
				</div>
			</section>
			<section class="feature">
				<img src="img/feature2.png" widht="420" height="270" alt="特徴2">
				<div class="desc">
					<h1>すごい特徴があるよ！</h1>
					<p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p>
			</div>
		</section>
		<section class="feature">
			<img src="img/feature3.png" widht="420" height="270" alt="特徴3">
			<div class="desc">
				<h1>すごい特徴があるよ！</h1>
				<p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p>
		</div>
	</div>

	<section class="flex">
			<h1 data-subtitle="- voices -" class="section-title">利用者の声</h1>
				<div class="voices">
					<img src="img/user1.png" width="80" height="80" alt="利用者A">
					<div class="voice">
						<h3>利用者A</h3>
						<p>良い感じです。良い感じです。良い感じです。良い感じです。良い感じです。...

CSS

body {
    font-size: 16px;
    font-family: Verdana, sans-serif;
    color: #333;
    margin: 0;
}
.orange-bg {
    color: #fff;
    background: url(../img/bg.png);
    background-size: cover;
}

.container {
	width: 820px;
	margin: 0 auto;
	padding:60px 0;
}
.btn {
	text-decoration: none;
}
.section-title {
	text-align: center;
	font-style: normal;
	font-size: 24px;
	margin-bottom: 0;
	margin-top: 60px;
}
.section-title::after {
	content: attr();
}
.feature .desc {
	width:360px;
}
.feature:nth-last-of-type(odd) .desc {
	float: right;
	padding-left: 40px;
}
.feature:nth-last-of-type(even) .desc {
	float: left;
	padding-right: 40px;
}
.feature:not(:last-child){
	margin-bottom: 60px;
}
.feature {
	overflow: hidden;
}
.desc {
	display: inline-block;
}
.header h2 {
	font-style: normal;
	font-size: 18px;
	margin-top: 0;
}
.flex{
	margin-top: 50px;
}
.voices {
	display: inline-block;
}
.voice {
	width:150px;
	float: right;
	text-align: center;
	font-style: normal;
	background: #fff;
}
.flex2 {
	text-align: center;
}
h1{
	font-style: normal;
}
.voices img {
	border-radius: 50%;
	margin-top:-50px;
}
footer {
	text-align: center;
}