JSFiddle - React, Tailwind, and code Playground

HTML

<table class='myTable'>
<tr><td><div class='square' id='id1'></div></td>
    <td><div class='square' id='id2'></div></td>
    <td><div class='square' id='id3'></div></td></tr>
<tr><td><div class='square' id='id4'></div></td>
    <td><div class='square' id='id5'></div></td>
    <td><div class='square' id='id6'></div></td></tr>
<tr><td><div class='square' id='id7'></div></td>
    <td><div class='square' id='id8'></div></td>
    <td><div class='square' id='id9'></div></td></tr></table>

CSS

div.square{
    background-color: orange;
    width: 100px;
    height: 100px;
    margin:5px;
}

.myTable{
    -webkit-perspective:1000;
}

#id1, #id4, #id7{        
 -webkit-transform: rotateY(40deg);
}

#id3, #id6, #id9{        
 -webkit-transform: rotateY(-40deg);
}

#id2, #id5, #id8{        
 -webkit-transform: scale(0.94);
}