JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id=page>
  </div>
  <button id=start>
    Start
  </button>
</body>

</html>

CSS

#page {
  height: 160px;
  width: 200px;
  background: lightgrey;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center; /* added this */
}

.row_ {
 display: inline-flex; /* added this */
}

.abc {
  margin: 1px;
  padding: 10px;
  background: black;
  width: 30px;

  /* display: inline-block; no more needed */
}

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

@keyframes mover {
  from {
    margin: 1px;
  }

  to {
    margin: 40px;
  }
}

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

@keyframes tester {
  from {
    min-height: 22px;
  }

  to {
    min-height: 100px;
  }
}

JavaScript

function ct(tag, id, attrs) {
  var e = document.createElement(tag)
  if (typeof id == 'object') attrs=id
  if (typeof id == 'string') e.setAttribute('id', id)
  for (var a in attrs)
    if (attrs[a] !== undefined)
      e.setAttribute(a, attrs[a])
  return e
}

for (var i = 0; i < 3; i++) {
  $('#page').append(ct('div', {'class': 'row_'}))
  for (var y = 0; y < 3; y++) {
    $('.row_').eq(i).append(ct('div', {'class': 'abc'}))
  }
}

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