JSFiddle - React, Tailwind, and code Playground

HTML

<section>
		<article>
			<div class="1-4-container">
				<p><strong>The Beginner</strong></p>
				<p>Taking your first steps into a website<br />then this is for you</p>
			</div>
			<div class="1-4-container">
				<p><strong>Small Business</strong></p>
				<p>Time to feel up your piggy bank<br />oink this is what you want</p>
			</div>
			<div class="1-4-container">
				<p><strong>The Company</strong></p>
				<p>Creating money requires a dedicated site<br />so why not earn with me.</p>
			</div>
			<div class="1-4-container">
				<p><strong>Champion</strong></p>
				<p>To be the best you need to have the best<br />so take the cup with us.</p>
			</div>
		</article>
	</section>

CSS

section {
	width: 100%;
}
section article {
	width: 1000px;
	padding: 20px;
	margin: auto;
}

.1-4-container,
.2-4-container,
.3-4-container,
.4-4-container {
	float: left;
}
.1-4-container {
	width: 24%;
}
.2-4-container {
	width: 49%;
}
.3-4-container {
	width: 74%;
}
.4-4-container {
	width: 100%;
}
.1-4-container p strong,
.2-4-container p strong,
.3-4-container p strong,
.4-4-container p strong {
	color: #4c4c4c !important;
	font-family: Arial, sans-serif;
}
.1-4-container p,
.2-4-container p,
.3-4-container p,
.4-4-container p {
	color: #939393;
	font-family: Arial, sans-serif;
}