JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div id=page>
      <div class=abc>
        ABC
      </div>
      <div class=abc>
        ABC
      </div>
      <div class=abc>
        ABC
      </div>
      <div class=abc>
        ABC
      </div>
      <div class=abc>
        ABC
      </div>
    </div>
    <button id=start>
      Start
    </button>
  </body>
</html>

CSS

#page {
  height: 200px;
  width: 200px;
  background: lightgrey;
  overflow: auto;
}

.abc {
  color: red;
  padding: 10px;
  background: black;
  width: 30px;
}

.move {
  animation: move 0.6s cubic-bezier(1, 0, 1, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes move {
  from { margin: 0px; 
  transform: translateY(0px);}
  to { margin: 50px; 
  transform: translateY(-100px);}
}

JavaScript

$('#start').click(function() {
	$('.abc').addClass('move')
})