JSFiddle - React, Tailwind, and code Playground

by dotnil

HTML

<div>
    <button>Margin</button>
    <button>Border</button>
    <button>Padding</button>
</div>
<br>
<div class="outer">
    <div class="box"></div>
</div>

CSS

.box {
    padding: 30px;
    border: 5px solid #ccc;
    margin: 20px;
    background: #999;
}

.outer {
    display: inline-block;
    background: #eee;
}

JavaScript

$('button').on('click', function(e) {
    var prop = $(e.currentTarget).text().toLowerCase()
    var box = $('.box')
    var obj = {}
    
    if (prop === 'border') prop = 'border-width'
    
    obj[prop] = '+=50'
    box.animate(obj, 500, function() {
        obj[prop] = '-=50'
        box.animate(obj, 500)
    })
})