JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

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;

  /* new code */

  display: flex;
  flex-flow: column;
  justify-content: center;

  /* new code end */
}

.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;
  }

  to {
    margin: 50px;
  }
}

JavaScript

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