JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="slide-left">
        
    </div>
    
    <div class="slide-right">
        
    </div>
</div>

CSS

body {
    text-align: center;
}
#container {
    margin: auto;
	width:300px;
	height: 300px;
	background: red;
}

#container div {
	width:100px;
	height: 100px;
	background: blue;
}

JavaScript

$(".slide-left")
   .css("margin-left",-$("#container").width())
   .delay(400)
   .animate({
       marginLeft:0
 }, 900);

$(".slide-right")
   .css("margin-left",0)
   .delay(400)
   .animate({
   marginLeft:$("#container").width()
}, 900);