JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="background">
  <div class="container">
    <div class="brick">
      <div class='side1'></div>
      <div class='side2'></div>
      <div class='side3-bin'>
        <div class='side3'></div>
      </div>
      <div class="stud1"></div>
      <div class="stud2"></div>
      <div class="stud3"></div>
      <div class="stud4"></div>
      <div class="stud5"></div>
      <div class="stud6"></div>
      <div class="stud7"></div>
      <div class="stud8"></div>
    </div>
  </div>
</div

CSS

.container {  
  display: flex;
  justify-content: center;  
  align-items: center;
  height: 100%;
  width: 100%;
}

.brick {
  position: relative;
  height: 300px;
  width: 400px;
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: 2px 6px 30px 0 rgba(0,0,0,0.4);
}

.side1 {
  position: absolute;
  top: 140px;
  left: 160px;
  height: 68px;
  width: 180px;
  background: #1D6A9A;
  transform: skewY(-30deg);
}

.side2 {
  position: absolute;
  top: 166px;
  left: 70px;
  height: 68px;
  width: 90px;
  background: #237FBD;
  transform: skewY(30deg);
}

.side3 {
  position: absolute;
  top: 9px;
  left: 13px;
  height: 105px;
  width: 180px;
  background: #2696DD;
  transform: skewY(30deg);
}
.side3-bin {
  transform: rotate(-60deg);
}

.stud1 {
  position: absolute;
  top: 115px;
  left: 95px;
  width: 36px; 
  height: 30px; 
  background: #237FBD;
  margin-top: 6px;
  border-radius: 18px / 10px;
}
.stud1:before {
  content: ""; 
  position: absolute;
  height: 20px;
  width: 36px;
  border-radius: 18px / 10px;
  background: #4CB7FF;
}

.stud2 {
  position: absolute;
  top: 141px;
  left: 141px;
  width: 36px; 
  height: 30px; 
  background: #237FBD;
  margin-top: 6px;
  border-radius: 18px / 10px;
}
.stud2:before {
  content: ""; 
  position: absolute;
  height: 20px;
  width: 36px;
  border-radius: 18px / 10px;
  background: #4CB7FF;
}

.stud3 {
  position: absolute;
  top: 90px;
  left: 141px;
  width: 36px; 
  height: 30px; 
  background: #237FBD;
  margin-top: 6px;
  border-radius: 18px / 10px;
}
.stud3:before {
  content: ""; 
  position: absolute;
  height: 20px;
  width: 36px;
  border-radius: 18px / 10px;
  background: #4CB7FF;
}

.stud4 {
  position: absolute;
  top: 115px;
  left: 187px;
  width: 36px; 
  height: 30px; 
  background: #237FBD;
  margin-top: 6px;
  border-radius: 18px / 10px;
}
.stud4:before {
  content: ""; 
  position: absolute;
  height: 20px;
  width: 36px;
  border-radius: 18px / 10px;
  background: #4CB7FF;
}

.stud5 {
 ...