JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-container"> 
	<div class="image-wrap">IMAGE HERE</div> 
</div>

CSS

.img-container {
    position:relative;
    background: #ccc;
    colour:#000;
    width:300px;
}

.img-container:before{
	content: "";
	display: block;
	padding-top: 100%; 
}

.image-wrap {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}