JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-logo">
  <div class="b-logo__item b-logo__item_1"></div>
  <div class="b-logo__item b-logo__item_2"></div>
  <div class="b-logo__item b-logo__item_3"></div>
  <div class="b-logo__item b-logo__item_4"></div>
</div>

CSS

.b-logo{
    position: relative;
}
.b-logo__item{
    background: #00adef;
}
.b-logo__item_1{
    position: absolute;
    top: 65px; 
    left: 45px;
    width: 192px;
    height: 128px;
    -webkit-transform: perspective(800px) rotateY(-42deg) rotateZ(-3deg) rotateX(4deg);
    -moz-transform: perspective(800px) rotateY(-42deg) rotateZ(-3deg) rotateX(4deg);
    transform: perspective(800px) rotateY(-42deg) rotateZ(-3deg) rotateX(4deg);
}
.b-logo__item_2{
    position: absolute;      
    top: 39px;
    left: 195px;
    width: 250px;
    height: 154px;
    -webkit-transform: perspective(800px) rotateY(-41deg) rotateZ(-3.2deg) rotateX(4deg);
    -moz-transform: perspective(800px) rotateY(-41deg) rotateZ(-3.2deg) rotateX(4deg);
    transform: perspective(800px) rotateY(-41deg) rotateZ(-3.2deg) rotateX(4deg);
}
.b-logo__item_3{
    position: absolute;
    top: 209px;
    left: 45px;
    width: 191px;
    height: 128px;
    -webkit-transform: perspective(800px) rotateY(-42deg) rotateZ(3deg) rotateX(-3deg);
    -moz-transform: perspective(800px) rotateY(-42deg) rotateZ(2.6deg) rotateX(-3deg);
    transform: perspective(800px) rotateY(-42deg) rotateZ(2.6deg) rotateX(-3deg);
}
.b-logo__item_4{
    position: absolute;
    top: 211px; 
    left: 195px;
    width: 248px;
    height: 155px;
    -webkit-transform: perspective(800px) rotateY(-41deg) rotateZ(4.2deg) rotateX(-3.5deg);
    -moz-transform: perspective(800px) rotateY(-41deg) rotateZ(3.8deg) rotateX(-4deg);
    transform: perspective(800px) rotateY(-41deg) rotateZ(3.8deg) rotateX(-4deg);
}