JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.webdevdoor.com/demos/html5-pendulum-demo/js/jquery-css-transform.js"></script>
<script src="http://www.webdevdoor.com/demos/html5-pendulum-demo/js/jquery-animate-css-rotate-scale.js"></script>
<div class="blueclock">
                
                <div style="transform: rotate(0deg) scale(1, 1); display: block;" class="pendulum-parent">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Mercury_pendulum.png/121px-Mercury_pendulum.png" alt="Pendulum" class="pendulum-child" />
                </div>
            </div>

CSS

.blueclock {
    left: 50%;
    position: absolute;
    top: 0;
    z-index: 5;
}
.pendulum-parent {
    display: none;
    height: 22px;
    width: 22px;
}
.pendulum-child {
    left: -52px;
    position: absolute;
    top: 0;
}

JavaScript

$(document).ready(function(){	
    
    var rotation = 7;
        var swingtime = 1603;
    var swinger = $('.pendulum-parent');

function init() {
			swinger.animate({rotate: rotation}, 0, function () {
				swinger.css("display", "block");
				rotation *= -1;
				pendulumswing1();
			});
}
function pendulumswing1() {
			swinger.animate({rotate: rotation},swingtime, "swing", function(){
				 rotation *= -1;
				 pendulumswing1();
			});
		}
init();
    
    });