JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<h1>Hello World 12 232  0129</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cumque fugit natus, fugiat, possimus voluptatibus ex iusto unde dolorem. Inventore officiis autem iusto, iste adipisci deserunt. Recusandae eveniet voluptatibus fuga.</h2>
<!-- <div id="body">

    <div class="box">
    
      <div class="img"></div>
      
    </div>
    <div class="box">
    
      <div class="img"></div>
      
    </div>
  
</div> -->

CSS

@import url('https://fonts.googleapis.com/css?family=Varela+Round');
body {
  background: #272B2E;
  /* background: #745E49; */
}
* {
  font-family: 'Varela Round', sans-serif;
}
h1 {
  color: #F55B01;
  color: #745E49;
}
h2 {
  color: #745E49;
}
/* div#body {
  width: 100%;
  height: 400px;
  overflow :hidden;
}
div.box {
  width: 300px;
  height: 400px;
  background: darkblue;
  position: relative;
  margin: auto;
  transform: translateY(100%);
  overflow: hidden;
  animation: a .8s forwards 1s;
  display: inline-block;
  margin-right: 50px;
}
div.box:nth-child(2){
  animation-delay: 1.4s;
}

div.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background:url(http://picsum.photos/1200/900);
  background-size: cover;
  transform: translateY(-20%);
  animation: b .8s forwards 1.4s;
}
div.box:nth-child(2) div.img {
  animation-delay: 1.9s;
  background:url(http://picsum.photos/1200/1000);
}
@keyframes a {
  100% {
    transform: translateY(0);
  }
}
@keyframes b {
  100% {
    transform: translateY(0%);
  }
}
 */