JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="base" id="base1">Base1
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>
<div class="base" id="base2">Base2
    <div class="inner" id="inner1">1</div>
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>
<div class="base" id="base3">Base3
    <div class="inner" id="inner1">1</div>
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>

CSS

.base {
   width: 200px;
   height: 250px;
   display: block;
   -webkit-transform: rotatey(-45deg);
   transform: rotatey(-45deg);
   border: solid 2px black;
}

#base1 {
   -webkit-transform-style: preserve-3d;
}

#base2 {
   left: 300px;
   top: 0px;
   position: absolute;
}

#base3 {
   left: 600px;
   top: 0px;
   position: absolute;
   -webkit-transform: rotatey(-88deg);
   transform: rotatey(-88deg);
   -webkit-transform-style: preserve-3d;
}

.inner {
   border: solid 1px black;
   height: 20px;
   background-color: red;
}

#inner1 {
   -webkit-transform: rotatey(0deg);
   transform: rotatey(0deg);
}
#inner2 {
   -webkit-transform: rotatey(20deg);
   transform: rotatey(20deg);
}
#inner3 {
   -webkit-transform: rotatey(40deg);
   transform: rotatey(40deg);
}
#inner4 {
   -webkit-transform: rotatey(60deg);
   transform: rotatey(60deg);
}
#inner5 {
   -webkit-transform: rotatey(80deg);
   transform: rotatey(80deg);
}
#inner6 {
   -webkit-transform: rotatey(100deg);
   transform: rotatey(100deg);
}
#inner7 {
   -webkit-transform: rotatey(120deg);
   transform: rotatey(120deg);
}
#inner8 {
   -webkit-transform: rotatey(140deg);
   transform: rotatey(140deg);
}
#inner9 {
   -webkit-transform: rotatey(160deg);
   transform: rotatey(160deg);
}