JSFiddle - React, Tailwind, and code Playground

by Bram Verbiest

HTML

<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>

CSS

div{
    width:100px;
    height:100px;
    border: 1px solid #000;
    margin: auto;
}

.class2{
    background: #555;
}

JavaScript

var wide = function(){
    $(this).animate({'width':'120px'},200);
}

var normal = function(){
    $(this).animate({'width' : '100px'},200);
}

$(document).ready(function(){
    $('.class1').hover(wide,normal);
    
    $('.class1').click(function(){
        $(this).toggleClass('class1 class2');
    })
})