JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 680 170" width="680" height="170">
    <defs>
      <style>
        #square1{
          animation:2s rotate infinite linear;
        }
        #square2{
          animation:2s rotateInverse infinite linear;
        }
        @keyframes rotate{
          from{ transform:rotateX(0deg); transform-origin:center; }
          to{ transform:rotateX(360deg); transform-origin:center; }
        }
        @keyframes rotateInverse{
          from{ transform:rotateX(360deg); transform-origin:center; }
          to{ transform:rotateX(0deg); transform-origin:center; }
        }
      </style>
    </defs>
    <path d="M141.86 54.19L141.86 126.91L41.86 126.91L41.86 26.91L141.86 26.91" stroke="#000000" stroke-width="10" fill="transparent" id="square1"></path>
    <path d="M124.12 115.75L124.12 43.02L224.12 43.02L224.12 143.02L124.12 143.02" stroke="#000000" stroke-width="10" fill="transparent" id="square2"></path>
</svg>