JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div class='box'><div><h2>Box 1</h2></div></div>
<div id='clear'></div>
</div>

CSS

.box {
	float: left;
	height: 0;
	width: 38%;
	padding-bottom: 38%;
	background-color: #b3d4fc;
	margin-left: 8%;
    position: relative;
}

.box div {
	position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
	border: 1px solid black;
	display: block;
    background-color: rgba(0,0,0,0.1);
}

div#clear {
	clear:both;
}