JSFiddle - React, Tailwind, and code Playground

by mrtoxas

HTML

<div class="wrapper">
<div class="canvas"> 
  <div class="tree-outer">
    <div class="tree">
      <div class="tree-inner">        
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>        
      </div> 
      <div class="tree-inner">        
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>        
      </div>
       <div class="tree-inner">        
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>        
      </div>
      <div class="tree-inner">        
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>
        <div class="tree-face"></div>        
      </div>            
    </div>
  </div>  
</div>  
</div>

SCSS

$decor-img-circle: "http://cyberstatic.net/images/statusicon/user_online.png";
$decor-img-claim: "http://cyberstatic.net/images/buttons/report.png";
$section:4;
$tree-width: 60;
body {
  background-color: SeaShell;
}
html,body,.wrapper{
  height:100%;
}
.wrapper{  
  display:flex;
  align-items:center;
  justify-content: center;
}
.tree,
.tree-outer,
.tree-inner {
  transform-style: preserve-3d;
}
.canvas {
  width: 350px;
  height: 300px;  
  perspective: 1000px;
  perspective-origin: 50% 25%;  
}
.tree {
  width: $tree-width + px;
  height: 100px;
  position: absolute;
}
.tree-outer {
  transform: translate3d(145px, 20px, 0);
}
.tree {
  animation: rotate 12s linear infinite;
}

@for $i from 2 to $section+1 {
  .tree-inner:nth-child(#{$i}) {
    margin-top: $i * ($i * 3) + unquote("px");
    margin-left: -$tree-width * ($i - 1) / 2 + unquote("px");
  }
}

@for $i from 1 to $section+1 {
  .tree-inner:nth-child(#{$i}) {
    .tree-face {
      width: 0;
      height: 0;
      transform-origin: 50% (174% / $i);
      position: absolute;
      border-bottom-width: $tree-width * ($i * 0.5) * 2px;
      border-left-width: $tree-width * ($i * 0.5) + unquote("px");
      border-right-width: $tree-width * ($i * 0.5) + unquote("px");
      border-style: solid;
      border-top-width: 0;
      border-color: transparent transparent #007bff transparent;
      border-bottom-color: green;
      margin-top: 0px;
      z-index: 0;
    }

    .tree-face:nth-child(1) {
      transform: rotateX(30deg) translate3d(0, 0, $tree-width + unquote("px"));
    }
    .tree-face:nth-child(2) {
      transform: rotateY(90deg) rotateX(-30deg)
        translate3d(0, 0, -$tree-width + unquote("px"));
    }
    .tree-face:nth-child(3) {
      transform: rotateY(90deg) rotateX(30deg)
        translate3d(0, 0, $tree-width + unquote("px"));
    }
    .tree-face:nth-child(4) {
      transform: rotateX(-30deg) translate3d(0, 0, -$tree-width + unquote("px"));
    }
  }
}

@for $i from 0 to $section+1...