JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="stage">
      <div id="rotate">
        <div id="ring-1" class="ring">
        <div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(200px); "><p>0</p></div>
        <div class="poster" style="-webkit-transform: rotateX(30deg) translateZ(200px); "><p>1</p></div>
        <div class="poster" style="-webkit-transform: rotateX(60deg) translateZ(200px); "><p>2</p></div>
        <div class="poster" style="-webkit-transform: rotateX(90deg) translateZ(200px); "><p>3</p></div>
        <div class="poster" style="-webkit-transform: rotateX(120deg) translateZ(200px); "><p>4</p></div>
        <div class="poster" style="-webkit-transform: rotateX(150deg) translateZ(200px); "><p>5</p></div>
        <div class="poster" style="-webkit-transform: rotateX(180deg) translateZ(200px); "><p>6</p></div>
        <div class="poster" style="-webkit-transform: rotateX(210deg) translateZ(200px); "><p>7</p></div>
        <div class="poster" style="-webkit-transform: rotateX(240deg) translateZ(200px); "><p>8</p></div>
        <div class="poster" style="-webkit-transform: rotateX(270deg) translateZ(200px); "><p>9</p></div>
        <div class="poster" style="-webkit-transform: rotateX(300deg) translateZ(200px); "><p>10</p></div>
        <div class="poster" style="-webkit-transform: rotateX(330deg) translateZ(200px); "><p>11</p></div>
        </div>
      </div>
    </div>

   <strike>
    <p>//This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.</p>
    <p>The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform
      that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing
      element around too.</p>
    <p>Note that you can still select the numbers on the ring; everything remains clickable.</p>
    
    </strike>

CSS

body {
        font-family: 'Lucida Grande', Verdana, Arial;
        font-size: 12px;
      }

      #stage {
        width: 600px;
        height: 400px;
        /*
        
        Setting the perspective of the contents of the stage
        but not the stage itself
        
        */
        -webkit-perspective: 800;
      }

      #rotate {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        
-webkit-transform: rotateZ(90deg);
        /* Ensure that we're in 3D space */
        -webkit-transform-style: preserve-3d;
        /*
        Make the whole set of rows use the x-axis spin animation
        for a duration of 7 seconds, running infinitely and linearly
        */
       /* -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;*/
      }

      .ring {
        margin: 0 auto;
        height: 110px;
        width: 600px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }
      
      .ring > :nth-child(odd) {
        background-color: #995C7F;
      }

      .ring > :nth-child(even) {
        background-color: #835A99;
      }

      .poster {
        position: absolute;
        left: 250px;
        width: 100px;
        height: 100px;
        opacity: 0.7;
        color: rgba(0,0,0,0.9);
        -webkit-border-radius: 10px;
      }
      
      .poster > p {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        margin-top: 28px;
      }

      /*
      Set up each row to have a different animation duration
      and alternating y-axis rotation directions.
      */
      #ring-1 {
        -webkit-animation-name: x-spin;
        -webkit-animation-duration: 2s;
        
      }
/*
      #ring-2 {
        -webkit-animation-name:...