JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  
  <div class="text">
    
  </div>
  
  <div class="cub">
  <div class="rotate">
  
    <div class="cubici">
      <div>some lorem text</div>
    </div>
     <div class="cubici">
      <div>some lorem text</div>
    </div>
     <div class="cubici">
      <div>some lorem text</div>
    </div>
    
    </div>
    
    
    <div class="rotate two">
  
    <div class="cubici" style="background:#000;color:#fff;">
      <div>some lorem text</div>
    </div>
     <div class="cubici">
      <div>some lorem text</div>
    </div>
     <div class="cubici">
      <div>some lorem text</div>
    </div>
    
    </div>
    
     <div class="rotate three">
  
    <div class="cubici">
      <div>some lorem text</div>
    </div>
     <div class="cubici">
      <div>some lorem text</div>
    </div>
     <div class="cubici">
      <div>some lorem text</div>
    </div>
    
    </div>
  </div>
  
</div>

CSS

body{
  background:#F6F6F6;
}

.cubici{
  background:#fff;
  height:100px;
  width:100px;
display: inline-block;
}
.rotate{
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cubici>div{
 
text-align: center;
position: relative;
left: -2px;
top: 31px;
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}

.two{
  position:relative;
  left: 148px;
top: -98px;
}
.three{
    position:relative;
left: 296px;
top: -196px;
  
}