JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
      <h3 style="text-align: center">0</h3>
      <p class="item1">element1</p>
      <p class="item2">element2</p>
      <p class="item3">element3</p>
      <p class="item4">element4</p>
 </div>

CSS

body {
        display: grid;
        justify-content: center;
        width: 100vw;
      }

      .wrapper {
        width: 500px;
        height: 500px;

        display: grid;
        justify-content: center;
        align-content: center;
      }

      .wrapper > * {
        grid-column: 1;
        grid-row: 1;
      }

    .item1 {
      animation: rotate1 1s linear 1 forwards;
    }

    .item2 {
      animation: rotate2 1s linear 1 forwards;
    }

    .item3 {
      animation: rotate3 1s linear 1 forwards;
    }

    .item4 {
      animation: rotate4 1s linear 1 forwards;
    }

    @keyframes rotate1 {
      from {
        transform: rotate(0deg) translate(0px);
      }
      to {
        transform: rotate(45deg) translate(120px);
      }
    }

    @keyframes rotate2 {
      from {
        transform: rotate(0deg) translate(0px);
      }
      to {
        transform: rotate(135deg) translate(120px);
      }
    }

    @keyframes rotate3 {
      from {
        transform: rotate(0deg) translate(0px);
      }
      to {
        transform: rotate(225deg) translate(120px);
      }
    }

    @keyframes rotate4 {
      from {
        transform: rotate(0deg) translate(0px);
      }
      to {
        transform: rotate(315deg) translate(120px);
      }
    }