JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stretchy-wrapper">
<div> 
Your content here
</div>
</div>

CSS

body {
	width: 36%;
	margin: 0 auto;
}

div.stretchy-wrapper {
	width: 100%;
	padding-bottom: 100%; /* 1:1 */
	position: relative;
	background: blue;
}

div.stretchy-wrapper > div {
	position: absolute;
  width: 100%;
  height: 100%;
	top: 0; bottom: 0; left: 0; right: 0;
	color: white;
	text-align: center;
}