JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="inner-container">
    <div class="box box1">
      1
    </div>
    <div class="box box2">
      2
    </div>
    <div class="box box3">
      3
    </div>
    <div class="box box4">
      4
    </div>
    <div class="box box5">
      5
    </div>
  </div>
</div>


<button id="btn">Next Slide</button>

CSS

#test { width:100px; min-height:100px; }

.container {
  width: 250px;
  height: 250px;
  border: 1px dotted red;
}

.inner-container {
  width: 1250px;
}

.inner-container:after {
  display: block;
  clear: both;
  content: "";
}

.box {
    float: left;
    background: green;
    width: 250px;
    height: 250px;
    opacity: 0.4;
    padding: 104px;
    font-size: 36px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

button {
  margin-top: 20px;
}

JavaScript

$("#btn").click(function() {
    $('.box.box1').hide('slide', {direction: 'left'}, 1000);
});