JSFiddle - React, Tailwind, and code Playground
by fatfrank44
HTML
<div id="outline">
<div id="container">
<div id="frame">
<div id="numbers"></div>
</div>
</div>
</div>
CSS
#outline {
width: 361px;
height: 135px;
background-color: #FFF;
border 2px solid #fff;
float: left;
}
#container {
width: 331px;
height: 105px;
margin: 15px;
background-color: #666;
}
#frame {
width: 259px;
height: 77px;
overflow: hidden;
margin: 0px auto 0px;
}
#numbers {
width: 36px;
height: 840px;
background-color: #dc000f;
float: left;
}
JavaScript
$(document).ready(function () {
$('#numbers').delay(0).animate({
'margin-left': '100px'
}, {
duration: 1000,
queue: true
});
});