JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>

CSS

.container {
  width: 100%;
  /* margin: 30px; */
}
.container div {
  width: 25%;
  transform: rotate(-45deg);
  background: blue;
  float: left;
}
.container div:before {
  content: "";
  padding-top: 100%;
  display: block;
}