JSFiddle - React, Tailwind, and code Playground

by Maz Soma

HTML

<div class="kont">
		<div class="obj-kont-1"></div>
		<div class="obj-kont-2"></div>
		<div class="obj-kont-3"></div>
</div>

CSS

body {
    margin:0;
    padding:0
}
/*=== General === */
.kont {
  width: 90%;
  height: 233px;
  background: #9ac2ff;
  margin: 50px auto 50px auto;
  position: relative;
  overflow: hidden;
}

/*=== Grass ===*/
.obj-kont-1 {
  width: 100%;
  height: 63px;
  background-image: url(http://1.bp.blogspot.com/-uqv1z8ChkhI/UozIfId5m1I/AAAAAAAAAB8/4BUrDzwverA/s1600/grass.png);
  background-position:bottom;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  z-index: 1;
  -moz-animation: kont-1 2s infinite linear;
  -webkit-animation: kont-1 2s infinite linear;
  animation: kont-1 2s infinite linear;
}
@-moz-keyframes kont-1 {
  from {background-position: 0 0;} 											
  to {background-position: -190px 0;}
}
@-webkit-keyframes kont-1 {
  from {background-position: 0 0;} 											
  to {background-position: -190px 0;}
}

/*=== Mountain ===*/
.obj-kont-2 {
  width: 100%;
  height: 211px;
  background-image: url(http://1.bp.blogspot.com/-7QctF4y78r0/UozIf8oUnGI/AAAAAAAAACI/FVTIcr8MR1o/s1600/mount.png);
  background-position:bottom;
  background-repeat: repeat-x;
  position: absolute;
  top: 20px;
  -moz-animation: kont-2 13s infinite linear;
  -webkit-animation: kont-2 13s infinite linear;
  animation: kont-2 13s infinite linear;
}

@-moz-keyframes kont-2 {
  from {background-position: 0 0;} 											
  to {background-position: -400px 0;}
}

@-webkit-keyframes kont-2 {
  from {background-position: 0 0;} 											
  to {background-position: -400px 0;}
}



/*=== Super Hero Gak Jelas ===*/

.obj-kont-3 {
  width: 230px;
  height: 61px;
  background: url(http://4.bp.blogspot.com/-sGUDso43SfM/UozKESs2IKI/AAAAAAAAACU/E_pFjW2isWo/s1600/superman2.png) no-repeat top center;
  position: absolute;
  top: 35px;
  left: 40%;
  -moz-animation: kont-3 5s infinite linear;
  -webkit-animation: kont-3 5s infinite linear;
}

@-moz-keyframes kont-3 {
  0% {top: 20px} 
  50% {top: 42px;}
  100% {top: 20px;}
}

@-webkit-keyframes kont-3 {
  0% {top: 20px} 
  50%...