JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<div class="container">
  <div id="mainhomediv" class="maindiv">
  left div
    </div>

   <div id="mainhomediv1" class="maindiv">
  right div
    </div>
    
</div>

CSS

.maindiv{
    min-height: 60%;
    max-height: 60%;
    text-align: center;
    background-color: #435A43;
    -moz-box-shadow: inset 2px 2px 30px #001A00;
    -webkit-box-shadow: inset 2px 2px 30px #001A00;
    box-shadow: inset 2px 2px 30px #001A00;
    position: relative;
    width:100px;
    height:100px;
}

.container{
    overflow:hidden;
}
#mainhomediv{
float:left;    
}
#mainhomediv1{
    float:right;
}

JavaScript

$(function(){
    var counter=0;
    var divs=$('#mainhomediv,#mainhomediv1');
    function hideDiv(){
        divs.show().animate({'left': '-100%'},1000);
        divs.hide('fast');
        counter++;
    }
    function showDiv(){
        divs.filter(function(index){return index==counter%2;})
        .show('fast').animate({'left': '0%'},1000);
    }

    setInterval(function(){
        hideDiv();
        showDiv();
    },5*1000);
});