JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="test" data-animation='{"width":200,"height":200,"opacity":0.5}'></div>

CSS

#test {
    width: 100px;
    height: 100px;
    margin: 1em;
    background: #000;
}

JavaScript

$(function() {
    
    var test = $('#test');
    var data = test.attr('data-animation');
    var styles = JSON.parse(data);
    
    test.click(function() {
        
        test.animate(styles, 1000);
        
        
        
    });
    
    
});