JSFiddle - React, Tailwind, and code Playground

by niks999

HTML

<ul>
    <li id='simple_arc'> <span class='w0'>S</span>
 <span class='w1'>I</span>
 <span class='w2'>M</span>
 <span class='w3'>P</span>
 <span class='w4'>L</span>
 <span class='w5'>E</span>
 <span class='w6'> </span>
 <span class='w7'>A</span>
 <span class='w8'>R</span>
 <span class='w9'>C</span>
 <span class='w10'> </span>

    </li>
    <li id='reversed_arc'> <span class='w0'>R</span>
 <span class='w1'>E</span>
 <span class='w2'>V</span>
 <span class='w3'>E</span>
 <span class='w4'>R</span>
 <span class='w5'>S</span>
 <span class='w6'>E</span>
 <span class='w7'>D</span>
 <span class='w8'> </span>
 <span class='w9'>A</span>
 <span class='w10'>R</span>
 <span class='w11'>C</span>
 <span class='w12'> </span>

    </li>
    <li id='auto_radius'> <span class='w0'>A</span>
 <span class='w1'>U</span>
 <span class='w2'>T</span>
 <span class='w3'>O</span>
 <span class='w4'> </span>
 <span class='w5'>R</span>
 <span class='w6'>A</span>
 <span class='w7'>D</span>
 <span class='w8'>I</span>
 <span class='w9'>U</span>
 <span class='w10'>S</span>
 <span class='w11'> </span>
 <span class='w12'>T</span>
 <span class='w13'>E</span>
 <span class='w14'>X</span>
 <span class='w15'>T</span>
 <span class='w16'> </span>
 <span class='w17'>A</span>
 <span class='w18'>L</span>
 <span class='w19'>L</span>
 <span class='w20'> </span>
 <span class='w21'>O</span>
 <span class='w22'>V</span>
 <span class='w23'>E</span>
 <span class='w24'>R</span>
 <span class='w25'> </span>

    </li>
</ul>

CSS

#simple_arc {
      border: 1px solid red;
      display: block;
      width:306px;
      height:305px;
      position:relative;
  }
  #simple_arc>span[class^=w]:nth-of-type(n+0) {
      display:block;
      position:absolute;
      -moz-transform-origin:50% 100%;
      -webkit-transform-origin:50% 100%;
      -o-transform-origin:50% 100%;
      -ms-transform-origin:50% 100%;
      transform-origin:50% 100%;
  }
  #simple_arc span {
      font-family:'Aldrich';
      font-size:38px;
      font-weight:regular;
      font-style:normal;
      line-height:0.65;
      white-space:pre;
      overflow:visible;
      padding:0px;
  }
  #simple_arc .w0 {
      -moz-transform: rotate(-1.14rad);
      -webkit-transform: rotate(-1.14rad);
      -o-transform: rotate(-1.14rad);
      -ms-transform: rotate(-1.14rad);
      transform: rotate(-1.14rad);
      width: 21px;
      height: 24px;
      left: 42.7px;
      top: 93.95px;
  }
  #simple_arc .w1 {
      -moz-transform: rotate(-0.95rad);
      -webkit-transform: rotate(-0.95rad);
      -o-transform: rotate(-0.95rad);
      -ms-transform: rotate(-0.95rad);
      transform: rotate(-0.95rad);
      width: 11px;
      height: 24px;
      left: 58.34px;
      top: 75.89px;
  }
  #simple_arc .w2 {
      -moz-transform: rotate(-0.69rad);
      -webkit-transform: rotate(-0.69rad);
      -o-transform: rotate(-0.69rad);
      -ms-transform: rotate(-0.69rad);
      transform: rotate(-0.69rad);
      width: 34px;
      height: 24px;
      left: 65.63px;
      top: 55.91px;
  }
  #simple_arc .w3 {
      -moz-transform: rotate(-0.4rad);
      -webkit-transform: rotate(-0.4rad);
      -o-transform: rotate(-0.4rad);
      -ms-transform: rotate(-0.4rad);
      transform: rotate(-0.4rad);
      width: 21px;
      height: 24px;
      left: 99.89px;
      top: 39.25px;
  }
  #simple_arc .w4 {
      -moz-transform: rotate(-0.15rad);
      -webkit-transform: rotate(-0.15rad);
      -o-transform: rotate(-0.15rad);
      -ms-transform:...