JSFiddle - React, Tailwind, and code Playground

by enyojs

HTML

<div style="position: absolute; top:0; left:0; width: 400px; height: 1080px; background: lightblue">
    <div style="position: absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;" class="updown" id="wrapper">
        <div style="position: absolute; background: orange" id="container"
    </div>
</div>

CSS

@-webkit-keyframes updown {
  0%   { height: 100%; }
  50% { height: 0%; }
  100% { height: 100%; }
}
.updown {
  -webkit-animation: updown 2s infinite;
}

JavaScript

var w = document.getElementById("wrapper");
var c = document.getElementById("container");
var s = "";
c.style.height = w.offsetHeight + "px";
c.style.width = w.offsetWidth + "px";
for (var i=0; i<5; i++) {
    s += "<div style='display: inline-block; background: white; margin: 10px; height: 50px; width: 50px;'></div>"
}
c.innerHTML = s;