JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="service">
    <div class="square"></div>
  </div>
</div>

CSS

.parent {
	width: 30%;
  border: 1px solid black;
}

.service {
  position: relative;
  padding-bottom: 100%;
}

.square {
  position: absolute;
  width: 100%;
  height: 100%;
  background: pink;
}