JSFiddle - React, Tailwind, and code Playground

HTML

<div id="templatebox">
      <div class="ribbon exright" id="r1">
      </div>
      <div class="ribbon exleft" id="r2">
      </div>
      <div class="ribbon exright" id="r3">
      </div>
      <div class="ribbon exleft" id="r4">
      </div>
    </div>

CSS

#templatebox{
  width: 100%;
  height: 800px;
  padding-top: 50px;
}
.ribbon{
  height: 50px;
  position: relative;
  transition: all 1s ease;
  width: 300px;
  margin-bottom: 20px;
  z-index: 1000;
}
.exleft{
  right: -1200px;
  left: auto;
  margin-right: -100px;
  float: right;
}
.exleft.active{
  right: 0px;
}

.exright{
  left: -1200px;
  right: 0px;
  margin-left: -100px;
}
.exright.active{
  left: 0px;
}

#r1{
  background-color: red;
}
#r2{
  background-color: green;
}
#r3{
  background-color: blue;
  top: 170px;
}
#r4{
  background-color: yellow;
  top: 170px;
}

JavaScript

var ribbons = document.getElementsByClassName("ribbon");
    for(var i=0, j=ribbons.length; i<j; i++){
    	ribbons[i].className += " active";
    }