JSFiddle - React, Tailwind, and code Playground

by nhoizey

HTML

<?xml version="1.0"?>
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="board" viewBox="0 0 320 160" width="100%" height="100%" preserveAspectRatio="xMidYMin meet">
  <defs>
    <svg id="ball" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
      <circle stroke-width="1" cx="16" cy="16" r="15" style="fill: #f39c12; stroke: #e67e22" />
    </svg>
    <svg id="spring" width="32" height="16" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,0 L0,16 L8,0 L8,16 L16,0 L16,16 L24,0 L24,16 L32,0 L32,16" style="stroke-width: 2; stroke: #333; fill: none;" />
    </svg>
  </defs>
  <g>
    <path d="M4,4 L316,4 L316,156 L4,156 Z" style="stroke-width: 1; stroke: #777; fill: none;" />
      
    <use id="ball1" xlink:href="#ball" x="36" y="64" />
    <use id="spring1" xlink:href="#spring" x="4" y="72" />

    <animateTransform id="bounce11" xlink:href="#spring1" attributeType="xml" attributeName="transform" type="scale" values="1,1;0.5,1;1,1" begin="0" dur="2s" repeatCount="indefinite" />
    <animate id="bounce12" xlink:href="#spring" attributeType="xml" attributeName="x" values="0;4;0" begin="bounce11.begin" dur="2s" repeatCount="indefinite" />
    <animateTransform id="bounce13" xlink:href="#ball1" attributeType="xml" attributeName="transform" type="translate" values="0,0;-16,0;0,0" begin="bounce11.begin" dur="2s" repeatCount="indefinite" />

    <use id="ball2" xlink:href="#ball" x="252" y="64" />
    <use id="spring2" xlink:href="#spring" x="284" y="72" />

    <animateTransform id="bounce21" xlink:href="#spring2" attributeType="xml" attributeName="transform" type="scale" values="1,1;0.5,1;1,1" begin="0" dur="2s" repeatCount="indefinite" />
    <animateTransform id="bounce22" xlink:href="#spring2" attributeType="xml" attributeName="transform" type="translate" values="0,0;-4,0;0,0" begin="bounce21.begin" dur="2s" repeatCount="indefinite" />
    <animateTransform id="bounce23"...