JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://demo.omnigon.com/christian_bovine/shamelesscity/js/jQueryRotate3.js"></script>
<script type="text/javascript" src="http://demo.omnigon.com/christian_bovine/shamelesscity/js/easing.js"></script>           
<div class="city-details">
              <!-- image details -->
              <div class="details">
                <img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
              </div>
            </div>

CSS

.city-details{
    display: block;
    background: transparent url(http://demo.omnigon.com/christian_bovine/shamelesscity/images/tip.png) no-repeat 0 0; 
    width: 287px;
    height: 315px;
    position: absolute;
    top: 35px;
    right: 111px;
}
 .city-details .details{
  width: 283px;
    height: 309px;
    position: relative;
    overflow: hidden;
}


img.pointer{
    display: block;
    width: 192px;
    height: 11px; 
    position: relative;
    top: 218px;
    left: 50px;

}

JavaScript

$(document).ready(function () {             
                var start = 0;
            // Sets the Value of the City for now    
                var angle = 1 + Math.floor(Math.random() * 180);
                
                $("img.pointer").rotate({
                     angle: start,
                     animateTo: angle,
                     easing: $.easing.easeInOutSine
                   })
});