JSFiddle - React, Tailwind, and code Playground

by Andrew

HTML

<div class="parent">
    <div id="child" class="child">something</div>
</div>
<button id="grow" class="button">grow</button>
<button id="shrink" class="button2">shrink</button>

CSS

.parent {
    border: 0px;
    padding: 0px;
    top: 50px;
    left: 50px;
    background-color: #F00;
    width: 200px;
    height: 200px;
    position: absolute;
    vertical-align: center;
}

.child {
    position: absolute;
    border: 0px;
    padding: 0px;
    margin-left: 50px;
    margin-top: 50px;
    background-color: #000;
    color: #FFF;
    height: 100px;
    width: 100px;
}

JavaScript

$(document).ready (function () {
    positionChild();
});

function positionChild() {
    $( ".child" ).position({
                of: $( ".parent" ),
                my: "center center",
                at: "center center"
    });
}

$('#grow').click (function () {
    $('.child').animate({'margin-left': 24, 'margin-top': 24, width: 152, height: 152}, 1000);
});

$('#shrink').click (function () {
    $('.child').animate({'margin-left': 50, 'margin-top': 50, width: 100, height: 100}, 1000);
});