JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container iso">
   <!-- <div class="center"><div>-->
    <span class="linea"></span>
    <span class="linea"></span>
    <span class="linea"></span>
    <span class="linea"></span>
    <span class="linea"></span>
    <span class="linea"></span> 
    <div class="elements">
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem"></div>
      <div class="elem">
          <div class="sqrVW30 iso2">
            <div class="tiltParent fontW font5 gradient" 
                data-tilt-scale="1.05" data-tilt 
                data-tilt-glare data-tilt-max-glare="0.8">
              <div class="tiltChild textN">
                <span>Fotovoltaica</span>
              </div>
              <svg class="tiltChild tz11" viewBox="0 0 100 100">">
                <g class="tierra" >
                  <use  href="#graph"></use>
                </g>
              </svg>
            </div>
          </div> 
      </div>
    </div>

  </div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.0/vanilla-tilt.min.js"></script>

CSS

html, body{
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container{
  --size: 40vw;
  position:relative;
  height:var(--size);
  width:calc(var(--size) * 2);
  border:1px dashed gray;
  --degs: -36deg;
  --radius: 200%;
}

.center{
    position: absolute;
    left:25%;
    bottom:0%;
    height:50%;
    width:50%;
    border-top-left-radius: 100% 200%;
    border-top-right-radius: 100% 200%;
    background:#eee;
}



.elements{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}
.elem{
    border-radius: 50%;
    width: 20%;
    height: 40%;
    border:1px solid gray;
    background:white;
    display: block;
    position: absolute;
    overflow: visible;
    bottom: -20%;
    left: 40%;
}

.linea {
  height:0;
  width:45%;
  border-top:1px solid gray;
  position: absolute;
  overflow: hidden;
  bottom: -1%;
  left: 50%;
  transform-origin: center left;
}

.elements > div:nth-of-type(1) {transform: rotate(calc(var(--degs) * 0)) translate(var(--radius));}
.elements > div:nth-of-type(2) {transform: rotate(calc(var(--degs) * 1)) translate(var(--radius)); }
.elements > div:nth-of-type(3) {transform: rotate(calc(var(--degs) * 2)) translate(var(--radius)); }
.elements > div:nth-of-type(4) {transform: rotate(calc(var(--degs) * 3)) translate(var(--radius));}
.elements > div:nth-of-type(5) {transform: rotate(calc(var(--degs) * 4)) translate(var(--radius)); }
.elements > div:nth-of-type(6) {transform: rotate(calc(var(--degs) * 5)) translate(var(--radius)); }

span:nth-of-type(1) { transform: rotate(calc(var(--degs) * 0)) ;}
span:nth-of-type(2) { transform: rotate(calc(var(--degs) * 1)) ;}
span:nth-of-type(3) { transform: rotate(calc(var(--degs) * 2)) ;}
span:nth-of-type(4) { transform: rotate(calc(var(--degs) * 3)) ;}
span:nth-of-type(5) { transform: rotate(calc(var(--degs) * 4)) ;}
span:nth-of-type(6) { transform: rotate(calc(var(--degs) * 5)) ;}

/**...