JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="a">
<li class="cAccessories" id="AccButtons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccRibbons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccLaces"><span>blah blah..</span></li>
<li class="cAccessories" id="AccEmbroider"><span>blah blah..</span></li>
</ul>
CSS
#a {
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
padding: 0;
margin: 0;
list-style: none;
background-color: blue;
}
JavaScript
$("#a").animate ({"margin-left": "+=200px"}, {step: function (angle, fx) {
$(this).css ({"-moz-transform":"rotate("+angle+"deg)",
"-webkit-transform":"rotate("+angle+"deg)",
"-ms-transform":"rotate("+angle+"deg)",
"-o-transform":"rotate("+angle+"deg)"});
}, duration: 5000}, "linear");