JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

CSS

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{

  background:#c52329;
  border:solid 2px #FFF;
  float:left;

  position: absolute;
  left: 51px;
  

  height: 58px;
  left: 50px;
  top: -18px;
  transform: skew(240deg, 150deg);
  width: 100px;
  
}