JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="a">
    <div class="content">100%</div>
  </div>
</div>
<div class="row">
  <div class="b">
    <div class="content">50%</div>
  </div>
</div>
<div class="row">
  <div class="c">
    <div class="content">150%</div>
  </div>
</div>

CSS

.a {
  width: 25%;
  position: relative;
}
.a::after {
  background: tomato;
  padding-bottom: 100%;
  display: block;
  content: '';
}
.b {
  width: 25%;
  position: relative;
}
.b::after {
  background: lightseagreen;
  padding-bottom: 50%;
  display: block;
  content: '';
}
.c {
  width: 25%;
  position: relative;
}
.c::after {
  background: goldenrod;
  padding-bottom: 150%;
  display: block;
  content: '';
}
.content {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  margin-top: 1em;
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}
.row {
  display: flex;
  flex-direction: row;
  margin-bottom: 3em;
  justify-content: center;
  align-items: center;
}