JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <img src="http://picsum.photos/300" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia, doloribus doloremque accusantium, eaque libero quas corrupti! Voluptate, architecto id incidunt illum in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptates nostrum harum illum adipisci id nisi officia,...

CSS

/* body {
  margin: 0;
  overflow: hidden;
}
div.box {
  width: 50%;
  height: 100%;
  position: absolute;
  background: darkblue;
  animation: one .5s infinite;
  z-index: 99;
}
div.box:nth-child(2) {
  left: 50%;
  animation: two .5s infinite;
}
div.boxx {
  width: 100%;
  height: 50%;
  background: darkred;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  animation: three .5s infinite;
}
div.boxxx {
  width: 100%;
  height: 50%;
  background: darkred;
  position: absolute;
  top: 50%;
  animation: four .5s infinite;
}
@keyframes one {
  from {
    transform : translateX(-100%);
  }
  50% {
    transform: translateX(0);
    background: darkred;
  }
  100% {
    transform : translateX(-100%);
  }
}
@keyframes two {
  from {
    transform : translateX(100%);
  }
  50% {
    transform: translateX(0);
    background: darkred;
  }
  100% {
    transform : translateX(100%);
  }
}
@keyframes three {
  
  from {
    transform : translateY(-100%);
  }
  50% {
    transform: translateX(0);
    background: darkblue;
  }
  100% {
    transform : translateY(-100%);
  }
}
@keyframes four {
  
  from {
    transform : translateY(100%);
  }
  50% {
    transform: translateX(0);
    background: darkblue;
  }
  100% {
    transform : translateY(100%);
  }
} */
img {
  float: left;
}