JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
	<p>1</p>
</div>
<div id="d2">
	<p>2</p>
</div>
<div id="d3">
	<p>3</p>	
</div>

CSS

#d1 {
	background-color: #042326;
	border: 3px solid #00ddba;
	float: left;
}
#d1>p {
	color: #00ddba;
	font-family: arial;
}

#d2 {
	background-color: #0d2416;
	border: 3px dashed #65f900;
	float: left;
}
#d2>p {
	color: #65f900;
	font-family: georgia;
}

#d3 {
	background-color: #ede4ad;
	border: 3px dotted #6e5b3c;
	clear: right;
}
#d3>p {
	color: #6e5b3c;
	font-family: impact;
}
div {
    display: table;
    width: 200px;
	height: 200px;
	margin: 0 8px 8px 0;
}
div>p {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 82px;
}