JSFiddle - React, Tailwind, and code Playground

by petersphilo

HTML

<!doctype html>
    <head>
        <meta charset="utf-8">
        <title>Insert title here</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">test box</div>
        </div>
    </body>
</html>

CSS

body {
    margin: 0;
}
#outer {
    width:100%;
    height: 100px; 
    background: red;
    position: relative
}
#inner {
    position: relative;
    left: 50%;
    top:0; 
    margin: 0; 
    width:50%; 
    height: 50px; 
    background: green;
}

JavaScript

$('#inner').animate({
    'margin-left': '-25%'
}, 1200);
$('#inner').delay(2000).animate({
    'margin-left': '-50%'
}, 1200);