JSFiddle - React, Tailwind, and code Playground

by Andy Bat

HTML

<a href="#" class="toggle" style='display:block'>
<div class="class1">
</div>
</a>

CSS

div {
  padding:10px;
  background:gray;
  color:white;
  margin-top:10px;
}

.class1 { background:gray; position:relative; left:10px; width:100px; }
.class2 { background:blue; position:relative; left:20px;width:100px;}
.class3 { background:green; position:relative;left:0;width:100px;}

JavaScript

$('.toggle').click(function () {
  $('div').each(function(){
    var classes = ['class1','class2','class3'];
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});