JSFiddle - React, Tailwind, and code Playground

HTML

<!--- <div style="width:900px;height:200px;">
<a class="box" style="background:green;">aaaa</a>
</div>-->

<div class='box'> 
	<div class='content'>Aspect ratio of 1:1</div> 
</div>

CSS

.box{
    background:#000;
	position: relative;
	width: 50%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}