JSFiddle - React, Tailwind, and code Playground

by adam smth

HTML

<ul>
        <li style="animation: move1 4s infinite;"></li>
        <li style="animation: move2 4s infinite;"></li>
        <li style="animation: move3 4s infinite;"></li>
        <li style="animation: move4 4s infinite;"></li>
        <li style="animation: move5 4s infinite;"></li>
        <li style="animation: move6 4s infinite;"></li>
        <li style="animation: move7 4s infinite;"></li>
        <li style="animation: move8 4s infinite;"></li>
        <li style="animation: move9 4s infinite;"></li>
        <li style="animation: move10 4s infinite;"></li>
    </ul>

CSS

body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    ul{
        display: block;
        width: 1920px;
        height: 1080px;
        margin: 0;
        padding: 0;
    }

    li {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        /*transform: translate(-50%, -50%);*/
        border: 1px solid #000;
        border-radius: 100%;
        list-style: none;
    }

    @keyframes move1 {
      0% {
        transform: translate(-46%, -50%);
        width:400px; height:400px; 
      }
      50% {
        transform: translate(-54%, -50%);
        width:400px; height:400px; 
      }
      100% {
        transform: translate(-46%, -50%);
        width:400px; height:400px; 
      }
    }

    @keyframes move2 {
      0% {
        transform: translate(-50%, -46%);
        width:1000px; height:1000px; 
      }
      50% {
        transform: translate(-50%, -54%);
        width:405px; height:405px; 
      }
      100% {
        transform: translate(-50%, -46%);
        width:405px; height:405px; 
      }
    }

    @keyframes move3 {
      0% {
        transform: translate(-47%, -50%);
        width:900px; height:900px; 
      }
      50% {
        transform: translate(-55%, -50%);
        width:410px; height:410px; 
      }
      100% {
        transform: translate(-47%, -50%);
        width:410px; height:410px; 
      }
    }

    @keyframes move4 {
      0% {
        transform: translate(-50%, -50%);
        width:800px; height:800px;  
      }
      50% {
        transform: translate(-50%, -50%);
        width:415px; height:415px; 
      }
      100% {
        transform: translate(-50%, -50%);
        width:415px; height:415px; 
      }
    }

    @keyframes move5 {
      0% {
        transform: translate(-49%, -50%);
        width:700px; height:700px; 
      }
      50% {
        transform: translate(-57%, -50%);
        width:420px;...