JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
<div id="slide1"></div>
<div id="slide2"></div>
</div>

<input id="left" type="button" value="<">
<input id="right" type="button" value=">">

CSS

#slider {
  width: 200px;
  height: 200px;
  background: white;
  margin-top: 30px;
  margin-left: 100px;
  overflow: hidden;
  white-space:nowrap;

}

#slide1, #slide2{
  width: 200px;
  height: 200px;
  display: inline-block;
  transition: 1s;
  
}

#slide1{
  background: blue;
  
}

#slide2{
  background: green;
  margin-left:-204px;
}

JavaScript

var bbb = document.getElementById("slide1");


left.onclick = function(){
bbb.style.marginLeft="-200px"
}

right.onclick = function(){
bbb.style.marginRight="200px"
}