JSFiddle - React, Tailwind, and code Playground

by alokswain

HTML

<div>Test the flow of this.</div>
<div class="test"></div>
<div id="square"></div>
<div>Keep testing the flow of this.</div>
<div style="clear: left">More testing</div>

CSS

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    float: left;
    background: blue;
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    margin: -50px; /* inital margin - ((intial margin - width (or height))/2) */
}
.test {
    float: left;
    width: 30px;
    height: 100px;
    border: 1px solid red;
}