JSFiddle - React, Tailwind, and code Playground

by hxtpoe

HTML

<div class="inner" style="width: 200px; height: 200px;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(20 20)">
  <rect x="-15" y="-15" width="30" height="30" fill="#e15b64" transform="scale(0.465877 0.465877)">
    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.4s"></animateTransform>
  </rect></g>
<g transform="translate(50 20)">
  <rect x="-15" y="-15" width="30" height="30" fill="#f47e60" transform="scale(0.230935 0.230935)">
    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.3s"></animateTransform>
  </rect></g>
<g transform="translate(80 20)">
  <rect x="-15" y="-15" width="30" height="30" fill="#f8b26a" transform="scale(0.359005 0.359005)">
    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.2s"></animateTransform>
  </rect></g>
<g transform="translate(20 50)">
  <rect x="-15" y="-15" width="30" height="30" fill="#f47e60" transform="scale(0.230935 0.230935)">
    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.3s"></animateTransform>
  </rect></g>
<g transform="translate(50 50)">
  <rect x="-15" y="-15" width="30" height="30"...