JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <svg class="wrapper">
        <text x="5" y="17" fill="white" font-size="12">SVG</text>
        <g transform="translate(100, 50)">
            <rect x="-25" y="-12.5" width="50" height="25" id="svg-box" />
        </g>
    </svg>
    <div class="wrapper">
        <p class="text">DIV</p>
        <div id="div-box"></div>
    </div>
</div>

CSS

#container {
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto;
}

.wrapper {
    position: relative;
    display: block;
    width: 200px;
    height: 100px;
    background: #ccc;
    margin: 50px auto;
}

svg .text {
    x: -50;
    y: 15;
    fill: red;
    font-size: 12;
}

div.wrapper .text {
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    font-size: 12px;
    margin: 0;
}

#svg-box {
    x: -25;
    y: -12.5;
    width: 50px;
    height: 25px;
    fill: red;
}

#div-box {
    position: absolute;
    top: 37.5px;
    left: 75px;
    width: 50px;
    height: 25px;
    background: blue;
}

#svg-box {
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: 0 0;
}

#svg-box,
#div-box {
  -webkit-animation: rotate 1.5s infinite linear;
     -moz-animation: rotate 1.5s infinite linear;
       -o-animation: rotate 1.5s infinite linear;
          animation: rotate 1.5s infinite linear;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg)
  }
}

@-moz-keyframes rotate {
  100% {
    -moz-transform: rotate(360deg)
  }
}

@-o-keyframes rotate {
  100% {
    -o-transform: rotate(360deg)
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}