JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<script>
  var monthCount = 0;
var left = 0;var lIncr =34;
  function prevHandler() {

var wrapper = document.getElementById("cal");

    appendMonths();
    
    var months = wrapper.getElementsByClassName("card");
    
    var monthsList = 			Array.prototype.filter.call(months, function(month) {
        return month.nodeName === 'DIV';
	  }); 

    var id = 0;
   // alert(monthsList[id].offsetWidth);
   
    
    left = 0;
    for ( ; id <3; id++) {
      			//console.log(monthsList[id].innerHTML);      
          	//monthsList[id].style.left  = left + "px";
            left +=	monthsList[id].offsetWidth;
    }
    left  = -left;
    
    for ( id = 0; id <monthsList.length; id++) {
      			console.log(monthsList[id].innerHTML);      
          	monthsList[id].style.left  = left + "px";
            left +=	monthsList[id].offsetWidth;        
     }
      
     id = 0;
     for ( ; id <3; id++) {   
     	var month =  monthsList[id];
     	month.parentNode.removeChild(month);       
     }

  }

  function nextHandler() {

    var newNode = buildMonth();
    newNode.innerHTML = "next"

    var calender = document.getElementById("calender");

    calender.appendChild(newNode);

    var wrapper = document.getElementById("cal");
    wrapper.classList.remove("move-left");
    wrapper.classList.add("move-right");
    //buildMonth(1);
    // var firstMonth = document.getElementById("cal2").childNodes[1];
    wrapper.addEventListener("transitionend", function(event) {
      //wrapper.remove ("move-left");
      //console.log("transition complete");


    //  calender.removeChild(calender.firstChild);
  //    wrapper.classList.remove("move-right");

    }, false);
  }

  function buildMonth() {
    var newNode = document.createElement("div");
  //  newNode.style = "display:inline-block; "
    newNode.classList.add("card");
    return newNode;
  }

  function appendMonths() {


    var cal = document.getElementById("calender");
    //cal.id="calender";
    var tmp =...

CSS

.wrapper {
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 50px;
  border: 1px solid black;
}

.slide {
  position: absolute;
  left: 0px;
  width: 130px;
  height: 100px;
  background: orange;
}

.move-left {
  transition:  transform .3s;

  left: 0px;
}

.move-right {
  transition: all .3s;
  left: 0px;
}

.trans {
  transform : translate(-50%,0);
  transition: transform .3s;

}

.move-center {
  opacity : 1;
  transition: all .3s;
}

.month {
  font-size: 40px;
  transition : all .3s
  border: 1px solid black;
}

.card
{
  height : 40px;
  font-size: 50px;
  transition : left .4s  ;
  position : absolute;.
  transition-timing-function : ease	;
}

.container
{
    overflow: hidden;
    height: 100px;
    width : 200px;
    position: relative;
    outline : 0;
}