JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="container">
    <div id="box" class="small">
    </div>
</div>

CSS

.small {
    width: 100px;
    height:100px;
    background: #000;
}

.medium {
    width: 200px;
    height: 200px;
    background: green;
}

.large {
    width:400px;
    height: 400px;
    background: blue;
}

JavaScript

var box=$('#box');
var classes=['small','medium','large'];
var iterator=0;

box.mouseenter(function(){
    $(this).removeClass();
    $(this).addClass(classes[iterator]);
    iterator+=1;
    iterator=iterator>classes.length-1?0:iterator;
});