JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<script>
  var monthCount = 0;

  function prevHandler() {
    var wrapper = document.getElementById("cal");
 	//	wrapper.style.left="-.5px";

    appendMonths();
    
    var months = wrapper.getElementsByClassName("month");
			//wrapper.classList.add(".move-center");
    var monthsList = Array.prototype.filter.call(months, function(month) {
        return month.nodeName === 'DIV';
  });
  wrapper.classList.add("trans");
    //  alert(monthsList.length);
    
      var id = 0;
      for ( ; id <3; id++) {
        
        	var month = monthsList[id] 
         month.parentNode.removeChild(month);       
        
      }


 //   wrapper.classList.remove("move-left");
  
 	//	wrapper.classList.remove("move-center");
    wrapper.addEventListener("transitionend", function(event) {
 //   wrapper.classList.remove("move-right");
  //  wrapper.classList.add(".move-center");
wrapper.style.left="";
    });

  }

  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("month");
    return newNode;
  }

  function appendMonths() {


    var cal = document.getElementById("calender");
    //cal.id="calender";
    var tmp = (monthCount + 3);
    for (var i = monthCount; i < tmp; i++) {
      var m1 = buildMonth();
     ...

CSS

.wrapper {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 100px;
  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;
}