JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	
	<h1>DUMET School</h1>

	      <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>
              </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>
              </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...

CSS

/* SELAMAT DATANG DI DUMET SCHOOL */

/*= GENERAL STYLING
--------------------------------------------------------*/

body { background: #36F; width: 100%; font-family: 'Viga'; margin: 0; padding: 0;}

div.container { width: 1000px; margin: 5% auto;   }

h1{
color: #fff; 
text-align: center; 
font-family: 'Viga';
font-size: 45px;

}



p{
color: #F6933C; 
text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
line-height:1.33333em;
font-size:2.25em;
line-height:1.33333em;
margin: 0;
padding: 0;

}


span { 
color: #990000;
line-height:1.33333em;
font-size:2.25em;
line-height:1.33333em;

}


ul { width: 960px; margin: 20px auto; }
li { float: left; position: relative;  list-style: none;} 
				

				
/*= TEXT ELEMENTS
--------------------------------------------------------*/				

      #simple_arc { 
					
					 display: block; 
					 width:306px; 
					 height:305px;
					 }

                     #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:'Viga';
					 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:...